Using JavaScript to Change Your Web Page Font Size

Discussion in 'Java Script/AJAX' started by JavaScript, Aug 13, 2010.

  1. JavaScript New Member

    Member Since:
    Nov 26, 2009
    Message Count:
    16
    Likes Received:
    1
    In this short JavaScript tutorial, Nurani guides you how to use JavaScript in changing the web page's font size. Maybe the JavaScripts to change font size are not new things on ... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

    [IMG]
    Demo: JavaScript Using JavaScript to Change Your Web Page Font Size

    How to setup

    Step 1: Use JavaScript code below to setup the script
    JavaScript
    Code (text):
    <script type="text/javascript">
    var min=8;
    var max=18;
    function zoominLetter() {
       var p = document.getElementsByTagName('p');
       for(i=0;i<p.length;i++) {
          if(p[i].style.fontSize) {
             var s = parseInt(p[i].style.fontSize.replace("px",""));
          } else {
             var s = 12;
          }
          if(s!=max) {
             s += 1;
          }
          p[i].style.fontSize = s+"px"
       }
    }
    function zoomoutLetter() {
       var p = document.getElementsByTagName('p');
       for(i=0;i<p.length;i++) {
          if(p[i].style.fontSize) {
             var s = parseInt(p[i].style.fontSize.replace("px",""));
          } else {
             var s = 12;
          }
          if(s!=min) {
             s -= 1;
          }
          p[i].style.fontSize = s+"px"
       }
    }
    </script>
    Step 2: Place HTML below in your BODY section
    HTML
    Code (text):
    <a href="javascript:zoominLetter();">A</a>
    <a href="javascript:zoomoutLetter();">a</a>





    JavaScript Countdown Timer - JavaScript Web based Music Player - Free JavaScript Codes
    JavaScript, Aug 13, 2010
    #1

  2. PradeepKr New Member

    Member Since:
    Aug 16, 2010
    Message Count:
    22
    Likes Received:
    0
    Can't we do that by changing whole css linked to the document in <head> section? In one shot.
    PradeepKr, Sep 7, 2010
    #2

  3. Austin camp New Member

    Member Since:
    Dec 10, 2010
    Message Count:
    39
    Likes Received:
    0
    yes you can change font size by using java script at run time.
    Austin camp, Dec 10, 2010
    #3

  4. liveseosolution New Member

    Member Since:
    Jun 10, 2011
    Message Count:
    29
    Likes Received:
    0
    This is nice JavaScript tutorial. I am very pleased to find the thread.
    liveseosolution, Jul 25, 2011
    #4

Share This Page