JavaScript DHTML/HTML

Материал из Web эксперт
Перейти к: навигация, поиск

Change font size

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O"Reilly & Associates
     Copyright 2003 Danny Goodman
-->
<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">
<h1 style="font-size:26px; font-weight:bold">User-selectable Font Sizes</h1>
<div id="textSizer">
<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>
</div>
<hr /> 
<p>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.
</p>

</body>
</html>



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>



Font array and date

<html>
<head>
<script language="JavaScript">
<!--
 var dateToday = new Date();
 var thisDay   = dateToday.getDay();
 var fonts     = new Array("Albertus Medium", "Times","Helvetica","Courier");
//-->
</script>
</head>
<body>
<font size="+1" face="&{ fonts[thisDay] };">
font</font>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML&oldid=2634»