Controlling HR Object Properties (IE) : HR Line « HTML « JavaScript DHTML

Controlling HR Object Properties (IE)

<TITLE>HR Object Properties</TITLE>
function setHRAttr(select) {
    if (document.all && document.all.myHR) {
        var choice = select.options[select.selectedIndex].value
        if (choice) {
            document.all.myHR.setAttribute(, choice)
<H1>HR Object Properties</H1>
<P>Here is the HR element you will be controlling:</P>
<HR ID="myHR">
Select an alignment: 
<SELECT NAME="align" onChange="setHRAttr(this)">
    <OPTION VALUE="left">Left</OPTION>
    <OPTION VALUE="center">Center</OPTION>
    <OPTION VALUE="right">Right</OPTION>

Select a rule color (IE only): 
<SELECT NAME="color" onChange="setHRAttr(this)">
    <OPTION VALUE="red">Red</OPTION>
    <OPTION VALUE="green">Green</OPTION>
    <OPTION VALUE="blue">Blue</OPTION>
    <OPTION VALUE="#FA8072">Some Hex Triplet Value</OPTION>
Select a rule shading: 
<SELECT NAME="noShade" onChange="setHRAttr(this)">
    <OPTION VALUE=true>No Shading</OPTION>
    <OPTION VALUE=false>Shading</OPTION>
Select a rule height: 
<SELECT NAME="size" onChange="setHRAttr(this)">
    <OPTION VALUE=2>2 (Default)</OPTION>
    <OPTION VALUE=4>4 Pixels</OPTION>
    <OPTION VALUE=10>10 Pixels</OPTION>
Select a rule width: 
<SELECT NAME="width" onChange="setHRAttr(this)">
    <OPTION VALUE="100%">100% (Default)</OPTION>
    <OPTION VALUE="80%">80%</OPTION>
    <OPTION VALUE=300>300 Pixels </OPTION>


Related examples in the same category

1.HR size
2.Line without noShade
3.Draw line with parameter