HTML JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. HTML
  4. Change font size
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



Change font size 

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}


body {font-family:Verdana, Helvetica, sans-serif;
      font-size:small}
#textSizer {text-align:right; display:none}
.textSize {border:1px solid black}


    #textSizer {display:block}


    body {font-size:xx-small}


    body {font-size:large}



// 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();
}



User-selectable Font Sizes

href="" onclick="changeSizeStyle('smallStyle'); return false">class="textSize" src="fontSmall.jpg" height="18" width="18" 
alt="Smallest" />class="textSize" src="fontMedium.jpg"  height="18" width="18" alt="Default" />href="" onclick="changeSizeStyle('largeStyle'); return false">class="textSize" src="fontLarge.jpg" height="18" width="18" alt="Biggest" />

 

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.