Controlling HR Object Properties : JavaScript DHTML examples (example source code) » HTML » HR Line

JavaScript DHTML
C++
Java Products
Java Articles
JavaScript DHTML Home  »   HTML   » [  HR Line  ]   
 



Controlling HR Object Properties

Please note that some example is only working under IE or Firefox.

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/

<HTML>
<HEAD>
<TITLE>HR Object Properties</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// document.all normalization trick for NN6
if (navigator.appName == "Netscape" && parseInt(navigator.appVersion>= 5) { 
   document.all = document.getElementsByTagName("*"
}
// one function does all!
function setHRAttr(select) {
    if (document.all && document.all.myHR) {
        var choice = select.options[select.selectedIndex].value
        if (choice) {
            document.all.myHR.setAttribute(select.name, choice)
        }
    }
}
</SCRIPT>
</HEAD>
<BODY>
<H1>HR Object Properties</H1>
<BR>
<P>Here is the HR element you will be controlling:</P>
<HR ID="myHR">
<FORM>
Select an alignment: 
<SELECT NAME="align" onChange="setHRAttr(this)">
    <OPTION></OPTION>
    <OPTION VALUE="left">Left</OPTION>
    <OPTION VALUE="center">Center</OPTION>
    <OPTION VALUE="right">Right</OPTION>

</SELECT>
<BR>
Select a rule color (IE only)
<SELECT NAME="color" onChange="setHRAttr(this)">
    <OPTION></OPTION>
    <OPTION VALUE="red">Red</OPTION>
    <OPTION VALUE="green">Green</OPTION>
    <OPTION VALUE="blue">Blue</OPTION>
    <OPTION VALUE="#FA8072">Some Hex Triplet Value</OPTION>
</SELECT>
<BR>
Select a rule shading: 
<SELECT NAME="noShade" onChange="setHRAttr(this)">
    <OPTION></OPTION>
    <OPTION VALUE=true>No Shading</OPTION>
    <OPTION VALUE=false>Shading</OPTION>
</SELECT>
<BR>
Select a rule height: 
<SELECT NAME="size" onChange="setHRAttr(this)">
    <OPTION></OPTION>
    <OPTION VALUE=2>(Default)</OPTION>
    <OPTION VALUE=4>Pixels</OPTION>
    <OPTION VALUE=10>10 Pixels</OPTION>
</SELECT>
<BR>
Select a rule width: 
<SELECT NAME="width" onChange="setHRAttr(this)">
    <OPTION></OPTION>
    <OPTION VALUE="100%">100(Default)</OPTION>
    <OPTION VALUE="80%">80%</OPTION>
    <OPTION VALUE=300>300 Pixels </OPTION>
</SELECT>
</BODY>
</HTML>
Related examples in the same category
1.  Draw line with parameter








Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.