Controlling FONT Object Properties
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/
<HTML>
<HEAD>
<TITLE>FONT 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 setFontAttr(select) {
if (document.all && document.all.myFONT) {
var choice = select.options[select.selectedIndex].value
if (choice) {
document.all.myFONT.setAttribute(select.name, choice)
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Font Object Properties</H1>
<BR>
<P>This may look like a simple sentence, but
<FONT ID="myFONT">THESE THREE WORDS</FONT>
are contained by a FONT element.</P>
<FORM>
Select a text color:
<SELECT NAME="color" onChange="setFontAttr(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 font face:
<SELECT NAME="face" onChange="setFontAttr(this)">
<OPTION></OPTION>
<OPTION VALUE="Helvetica">Helvetica</OPTION>
<OPTION VALUE="Times">Times</OPTION>
<OPTION VALUE="Comic Sans MS, sans-serif">Comic Sans MS, sans-serif</OPTION>
<OPTION VALUE="Courier, monospace">Courier, monospace</OPTION>
<OPTION VALUE="Zapf Dingbats, serif">Zapf Dingbats, serif</OPTION>
</SELECT>
<BR>
Select a font size:
<SELECT NAME="size" onChange="setFontAttr(this)">
<OPTION></OPTION>
<OPTION VALUE="3">3 (Default)</OPTION>
<OPTION VALUE="+1">Increase Default by 1</OPTION>
<OPTION VALUE="-1">Decrease Default by 1</OPTION>
<OPTION VALUE="1">Smallest</OPTION>
<OPTION VALUE="7">Biggest</OPTION>
</SELECT>
</BODY>
</HTML>
Related examples in the same category