JavaScript DHTML/HTML/HR Line
Содержание
Controlling HR Object Properties (IE)
<HTML>
<HEAD>
<TITLE>HR Object Properties</TITLE>
<SCRIPT LANGUAGE="JavaScript">
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>2 (Default)</OPTION>
<OPTION VALUE=4>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>
Draw line with parameter
<html>
<head>
<script language="JavaScript">
<!--
function hr(w, h) {
document.writeln("<hr align=left width=" + w +"height=" + h +">");
}
//-->
</script>
</head>
<body>
<h3>JavaScript Essentials <script>hr("75%","4")</script> </h3>
</body>
</html>
HR size
<html>
<body>
<script language="JavaScript">
function function1() {
document.getElementById("myHR").size = "30";
}
</script>
<hr id="myHR" color="green">
<input type="button" value="Size=30" onClick="function1();">
</body>
</html>
Line without noShade
<html>
<body>
<script language="JavaScript">
function function1() {
document.getElementById("myH").noShade = false
}
</script>
<hr id="myH" noshade="true" size="3">
<input type="button" value="Add a shade" onClick="function1();">
</body>
</html>