mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-07 12:15:51 +00:00
a9e2dece76
Allow color of an HR element to be changed. Make HR be a block element in quirks mode instead of the hacky inline we were previously using (standards mode already had it as a block). Patch by Ian Hickson <ian@hixie.ch> with minor modifications by me. r+sr=bzbarsky@mit.edu
87 lines
2.4 KiB
HTML
87 lines
2.4 KiB
HTML
<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> |