Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question getElementsByTagName

    Hello CodingForums.

    I have a script to increase the fontsize on my website.. It works perfectly, but currently it's only targetting my <p> tag and I want it to target my h2 and h3 aswell.. How can I do this?

    Code:
    var min=8;
    var max=18;
    function increaseFontSize() {
     
       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 decreaseFontSize() {
       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"
     
       }
    }

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Give all the elements or tags you wish to resize a common class name. Then use css.

    Or just place <p> tags around the <h2> tags.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    putting p tag around my h2 is not working..

    I'm surprised there's not some way to just add more tags under this line

    var p = document.getElementsByTagName('p');

    like

    var p = document.getElementsByTagName('p,h2,h3');

    I would prefer not to use classes as it would become a mess with some of the classes I have already

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No one else has a solution to this?

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,287
    Thanks
    23
    Thanked 611 Times in 610 Posts
    Quote Originally Posted by Philip M View Post
    Give all the elements or tags you wish to resize a common class name. Then use css.
    What was wrong with this?

    Side Note: Modern browsers do this.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Is this what you are trying to do?
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    
    function increaseFontSize(tag,tagmax) {
       var p = document.getElementsByTagName(tag);
       for(i=0;i<p.length;i++) {
          if(p[i].style.fontSize) { var s = parseInt(p[i].style.fontSize.replace("px","")); }
                             else { var s = tagmax; }
          if(s!=tagmax) { s += 1; }
          p[i].style.fontSize = s+"px"
       }
    }
    function decreaseFontSize(tag,tagmin) {
       var p = document.getElementsByTagName(tag);
       for(i=0;i<p.length;i++) {
          if(p[i].style.fontSize) { var s = parseInt(p[i].style.fontSize.replace("px","")); }
                             else { var s = tagmin; }
          if(s!=tagmin) { s -= 1; }
          p[i].style.fontSize = s+"px"
       }
    }
    window.onload = function() {
      increaseFontSize('H1',48);
      increaseFontSize('H2',36);
      increaseFontSize('P',12);
    }
    </script>
    
    </head>
    <body>
    <button onclick="increaseFontSize('H1',48)">Increase &lt;H1&gt;</button>
    <button onclick="decreaseFontSize('H1',36)">Decrease &lt;H1&gt;</button>
    <button onclick="increaseFontSize('H2',36)">Increase &lt;H2&gt;</button>
    <button onclick="decreaseFontSize('H2',24)">Decrease &lt;H2&gt;</button>
    <br>
    <button onclick="increaseFontSize('P',12)">Increase &lt;P&gt;</button>
    <button onclick="decreaseFontSize('P',8)">Decrease &lt;P&gt;</button>
    
    <h1>This is a &lt;H1&gt; section</h1>
    <h2>This is a &lt;H2&gt; section</h2>
    <p>This is one section</p>
    This is the contents of the 1st section.
    
    <h1>This is a &lt;H1&gt; section</h1>
    <h2>This is a &lt;H2&gt; section</h2>
    <p>This is another section</p>
    This is the contents of the 2nd section.
    
    <h1>This is a &lt;H1&gt; section</h1>
    <h2>This is a &lt;H2&gt; section</h2>
    <p>This is the last section</p>
    This is the contents of the 3rd section.
    
    </body>
    </html>

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,287
    Thanks
    23
    Thanked 611 Times in 610 Posts
    jmrker it works for me in FF and IE.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •