gecko-dev/layout/html/tests/attributes/font.html

76 lines
1.9 KiB
HTML

<HTML>
<BODY>
<BASEFONT COLOR="green" FACE="Times New Roman" SIZE="3">
<P>
This text's style is affected by applying style changes to the BASEFONT tag.
</P>
<P>
<FONT COLOR="red" FACE="Arial" SIZE="5">This text is contained in
a FONT tag. So, style changes to the BASEFONT and the FONT tag affect it.</FONT>
</P>
<P>
Use the form below to apply style changes to the text above.
</P>
<FORM>
<P>
<INPUT TYPE="radio" NAME="applyTo" VALUE="font" CHECKED>Apply style change to FONT tag <BR>
<INPUT TYPE="radio" NAME="applyTo" VALUE="basefont">Apply style change to BASEFONT tag <BR>
</P>
<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>face</I> to
<SELECT SIZE="1" NAME="face">
<OPTION SELECTED VALUE="times">Times New Roman</OPTION>
<OPTION VALUE="arial">Arial</OPTION>
<OPTION VALUE="courier">Courier</OPTION>
</SELECT>
<INPUT TYPE="button" VALUE="Change Face" onClick="changeFace(); return true;">
</P>
<P>
Set <I>color</I> to
<INPUT TYPE="text" NAME="color" VALUE="red">
<INPUT TYPE="button" VALUE="Change Color" onClick="changeColor(); return true;">
</P>
</FORM>
<SCRIPT>
var fnt = document.getElementsByTagName("font")[0];
var basefnt = document.getElementsByTagName("basefont")[0];
var obj = null;
function determineTarget() {
if (document.forms[0].applyTo[0].checked)
obj = fnt;
else
obj = basefnt;
}
function changeSize() {
determineTarget();
obj.size = document.forms[0].size.value;
}
function changeFace() {
determineTarget();
if (document.forms[0].face.selectedIndex == 0)
obj.face = "Times New Roman";
else if (document.forms[0].face.selectedIndex == 1)
obj.face = "Arial";
else
obj.face = "Courier New";
}
function changeColor() {
determineTarget();
obj.color = document.forms[0].color.value;
}
</SCRIPT>
</BODY>
</HTML>