1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<HTML>
<BODY>
<div style="border: solid; margin: 0 1em 1em 1em; padding: 1em; float: left; background: white;"> floater </div>
<div style="border: solid; margin: 0 1em 1em 1em; padding: 1em; float: right; background: white;"> another floater </div>
<hr ALIGN="center" NOSHADE SIZE="5" WIDTH="50">
<P style="clear:both">
Use the buttons below to set values for the different attributes for the HR shown
above.
</P>
<FORM>
<P>
Set <I>size</I> to
<INPUT TYPE="text" NAME="size" VALUE="5">
<INPUT TYPE="button" VALUE="Change Size" onClick="changeSize(); return true;">
</P>
<P>
Set <I>align</I> to
<SELECT SIZE="1" NAME="align">
<OPTION SELECTED VALUE="center">Center</OPTION>
<OPTION VALUE="left">Left</OPTION>
<OPTION VALUE="right">Right</OPTION>
<OPTION VALUE="none">None</OPTION>
</SELECT>
<INPUT TYPE="button" VALUE="Change Align" onClick="changeAlign(); return true;">
</P>
<P>
Set <I>noshade</I> to
<SELECT SIZE="1" NAME="noshade">
<OPTION SELECTED VALUE="true" >True</OPTION>
<OPTION VALUE="false">False</OPTION>
</SELECT>
<INPUT TYPE="button" VALUE="Change NoShade" onClick="changeNoShade(); return true;">
</P>
<P>
Set <I>width</I> to
<INPUT TYPE="text" NAME="width" VALUE="50">
<INPUT TYPE="button" VALUE="Change Width" onClick="changeWidth(); return true;">
</P>
<P>
Set <I>color</I> to
<INPUT TYPE="text" NAME="color" VALUE="">
<INPUT TYPE="button" VALUE="Change Color" onClick="changeColor(); return true;">
</P>
<P>
Set <I>background color</I> to
<INPUT TYPE="text" NAME="bgcolor" VALUE="">
<INPUT TYPE="button" VALUE="Change Background Color" onClick="changeBGColor(); return true;">
</P>
</FORM>
<SCRIPT>
var hr = document.getElementsByTagName("hr")[0];
function changeSize() {
hr.size = document.forms[0].size.value;
}
function changeAlign() {
if (document.forms[0].align.selectedIndex == 0)
hr.align = "center";
else if (document.forms[0].align.selectedIndex == 1)
hr.align = "left";
else if (document.forms[0].align.selectedIndex == 2)
hr.align = "right";
else
hr.align = "";
}
function changeNoShade(value) {
if (document.forms[0].noshade.selectedIndex == 0)
hr.noShade = true;
else
hr.noShade = false;
}
function changeWidth() {
hr.width = document.forms[0].width.value;
}
function changeColor() {
hr.color = document.forms[0].color.value;
}
function changeBGColor() {
document.documentElement.style.backgroundColor = document.forms[0].bgcolor.value;
}
</SCRIPT>
</BODY>
</HTML>
|
