title: Change font size in a div
body: <p>I am using the following code to change font size of <code>bodytext</code> div.  However when I try with a page that has various formattings, and also inside a <code>&lt;div id="bodytext"&gt;</code> it doesn't work, I don't know why.  It just changes the spacing between lines or something..</p>
  
  <p><strong>Working script:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $affectedElements = $("#bodytext"); // Can be extended, ex. $("div, p, span.someClass")
  
  // Storing the original size in a data attribute so size can be reset
  $affectedElements.children().each( function(){
    var $this = $(this);
    $this.data("orig-size", $this.css("font-size") );
  });
  
  $("#btn-increase").click(function(){
    changeFontSize(1);
  })
  
  $("#btn-decrease").click(function(){
    changeFontSize(-1);
  })
  
  $("#btn-orig").click(function(){
    $affectedElements.children().each( function(){
          var $this = $(this);
          $this.css( "font-size" , $this.data("orig-size") );
     });
  })
  
  function changeFontSize(direction){
      $affectedElements.children().each( function(){
          var $this = $(this);
          $this.css( "font-size" , parseInt($this.css("font-size"))+direction );
      });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button id="btn-decrease"&gt;A-&lt;/button&gt;
  &lt;button id="btn-orig"&gt;A&lt;/button&gt;
  &lt;button id="btn-increase"&gt;A+&lt;/button&gt;
  
  &lt;div id="bodytext"&gt;
    &lt;p style="font-size : 30px"&gt;This text is initially 30px&lt;/p&gt;
      &lt;p style="font-size : 20px"&gt;This text is initially 20px&lt;/p&gt;
      &lt;p style="font-size : 10px"&gt;This text is initially 10px&lt;/p&gt;
      
    &lt;/div&gt;  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Not working</strong> (that needs to be fixed):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $affectedElements = $("#bodytext"); // Can be extended, ex. $("div, p, span.someClass")
  
  // Storing the original size in a data attribute so size can be reset
  $affectedElements.children().each( function(){
    var $this = $(this);
    $this.data("orig-size", $this.css("font-size") );
  });
  
  $("#btn-increase").click(function(){
    changeFontSize(1);
  })
  
  $("#btn-decrease").click(function(){
    changeFontSize(-1);
  })
  
  $("#btn-orig").click(function(){
    $affectedElements.children().each( function(){
          var $this = $(this);
          $this.css( "font-size" , $this.data("orig-size") );
     });
  })
  
  function changeFontSize(direction){
      $affectedElements.children().each( function(){
          var $this = $(this);
          $this.css( "font-size" , parseInt($this.css("font-size"))+direction );
      });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;button id="btn-decrease"&gt;A-&lt;/button&gt;
  &lt;button id="btn-orig"&gt;A&lt;/button&gt;
  &lt;button id="btn-increase"&gt;A+&lt;/button&gt;
  
  &lt;div id="bodytext"&gt;
  
  &lt;blockquote&gt;
      &lt;h1 dir="ltr" align="center"&gt;
      &lt;span style="font-size: 35pt" lang="ar-sa"&gt;title page&lt;/span&gt;&lt;/h1&gt;  
    &lt;p class=MsoNormal dir=ltr style='text-align:justify'&gt;&lt;b&gt;
    &lt;font size="5"&gt;4. some text: &amp;quot; more text&lt;/font&gt;&lt;/span&gt;&lt;/b&gt;&lt;font size="5"&gt;&lt;span
  lang=ar-eg&gt; &lt;b&gt;more words&lt;/b&gt;&lt;/span&gt;&lt;b&gt;&amp;quot;&lt;/span&gt;&lt;/b&gt;&lt;/font&gt;&lt;b&gt;&lt;font size="5"&gt;[6].&lt;/font&gt;&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;
    &lt;p class=MsoNormal dir=ltr style='text-align:justify'&gt;
    &lt;font size="5"&gt;new sentence..................&lt;/font&gt;
    &lt;font style="font-size: 18pt" SIZE="5"&gt;
    &lt;a style="font-size:18pt;" href="http://example.com/file.html"&gt;a link&lt;/a&gt;&lt;/font&gt;&lt;font size="5"&gt;texttexttext.......&lt;/font&gt;&lt;font SIZE="5" face="Times New Roman"&gt;
    &lt;span lang="AR-EG" style="font-size: 18pt; "&gt;
    &lt;a href="http://www.example.com/file.php"&gt;a link&lt;/a&gt;&lt;/span&gt;&lt;/font&gt;&lt;font size="5"&gt;words words words words words ..&lt;/font&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;h2 dir=ltr&gt;&amp;nbsp;&lt;/h2&gt;
   &lt;h2 dir=ltr&gt;&lt;b&gt;&lt;span style="font-size: 22pt; font-style: normal"&gt;
   &lt;a name="text"&gt;other text&lt;/a&gt;&lt;/span&gt;&lt;/b&gt;&lt;/h2&gt;
    &lt;p class=MsoNormal dir=ltr style='text-align:justify'&gt;&lt;b&gt;
    &lt;font size="5"&gt;&amp;quot;final words....&lt;/font&gt;&lt;/span&gt;&lt;/b&gt;&lt;font size="5"&gt;&lt;b&gt;&amp;quot;&lt;/span&gt;&lt;/b&gt;&lt;/font&gt;&lt;b&gt;&lt;font size="5"&gt;[7].&lt;/font&gt;&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;
  &lt;/blockquote&gt;  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>