Change The Font Size On Fly using JavaScript

Published on January 10, 2013

If your reading something on a web page, If you feel difficult to read the text because of the font size. Then most of the people use ctrl+mouse scroll to zoom the web page. But some time it is too ugly to read like that.  Some user may not know ctrl+mouse trick. So it is wroth to add this little JavaScript which will Increase or Decrease font size of specific para easily.

Sample HTML

<p>
  <a href="#" id="btnI">Increase++</a>|
  <a id="btnD" href="#">Decrease--</a>
</p>
<br />
<p id="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
  <br />
  <br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
  <br />
</p>

Here we have one sample text para with id text Two links with id btnI,btnD acts like increase,decrease buttons. JavaScript

window.onload = function() {
  var btnI = document.getElementById('btnI'),
    btnD = document.getElementById('btnD'),
    text = document.getElementById('text');
  //when Increase clicked
  btnI.onclick = function(e) {
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
    }
    var currentSize = parseInt(getSize(text));
    text.style.fontSize = currentSize + 1 + 'px';
  };
  //when Decrease clicked
  btnD.onclick = function(e) {
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
    }
    var currentSize = parseInt(getSize(text));
    text.style.fontSize = currentSize - 1 + 'px';
  };
  //cross browser get current font size
  function getSize(txt) {
    if (txt.currentStyle) {
      return txt.currentStyle['fontSize'];
    } else if (window.getComputedStyle) {
      return document.defaultView.getComputedStyle(txt, null).getPropertyValue('font-size');
    } else {
      alert('Sorry your browser does not support');
    }
  }
};

When  user click on Increase or Decrease link then we first get the current font size using getSize function. I getSize for cross browser support. If clicked on increase then we will update font size by 1 or if it is decrease then will update it by -1. We are attaching buttons to onclick events. That’s it! hope you like it :D