JavaScript DHTML/HTML
- Anchor
- Applet
- Area
- Body
- Cite
- DIV
- DIV Style
- Del
- EM
- Embed
- Frame FrameSet
- HR Line
- HTML Basic
- HTML Body Event
- HTML CLass Style
- HTML Generate
- HTML Style
- Header
- Hyper Link
- Iframe
- Image Img
- Image Map
- Layer
- List Bullets
- Marquee
- Meta Info
- Mime Type
- Object
- Paragraph
- Script
- Style
- Table
- Text Direction
- Text HTML
- Text Selection
- URL
Содержание
Change font size
<source lang="html4strict"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title>Change font size </title> <style rel="stylesheet" id="mainStyle" type="text/css"> html {background-color:#cccccc} body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold} h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline} .buttons {margin-top:10px} </style> <style id="normalStyle" type="text/css"> body {font-family:Verdana, Helvetica, sans-serif;
font-size:small}
- textSizer {text-align:right; display:none}
.textSize {border:1px solid black} </style> <style id="sizer" type="text/css" disabled="disabled">
#textSizer {display:block}
</style> <style id="smallStyle" type="text/css" disabled="disabled">
body {font-size:xx-small}
</style> <style id="largeStyle" type="text/css" disabled="disabled">
body {font-size:large}
</style> <script type="text/javascript" src="../js/cookies.js"></script> <script type="text/javascript"> // enable/disable function setSizeStyle() {
if (document.getElementById) { document.getElementById("sizer").disabled = false; var styleCookie = getCookie("fontSize"); var styleIDs = ["smallStyle", "largeStyle"]; for (var i = 0; i < styleIDs.length; i++) { if (styleCookie == styleIDs[i]) { document.getElementById(styleIDs[i]).disabled = false; } else { document.getElementById(styleIDs[i]).disabled = true; } } }
} // set active style now, before content renders setSizeStyle(); // invoked by clicking on sizer icons function changeSizeStyle(styleID) {
setCookie("fontSize", styleID, getExpDate(180, 0, 0)); setSizeStyle();
} </script> </head> <body style="background-color:#ffffff">
User-selectable Font Sizes
<img src="fontSizer.jpg" height="18" width="72" alt="Font Sizer"><a href="" onclick="changeSizeStyle("smallStyle"); return false"><img class="textSize" src="fontSmall.jpg" height="18" width="18" alt="Smallest" /></a><a href="" onclick="changeSizeStyle(""); return false"><img class="textSize" src="fontMedium.jpg" height="18" width="18" alt="Default" /></a><a href="" onclick="changeSizeStyle("largeStyle"); return false"><img class="textSize" src="fontLarge.jpg" height="18" width="18" alt="Biggest" /></a>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</body> </html>
</source>
Controlling FONT Object Properties
<source lang="html4strict">
/* 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>
Font Object Properties
This may look like a simple sentence, but THESE THREE WORDS are contained by a FONT element.
<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>
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>
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>
</source>
Font array and date
<source lang="html4strict">
<html> <head> <script language="JavaScript">
</script> </head> <body> font </body> </html>
</source>