Increase decrease font size using Javascript

increase decrease font size on website

Javascript provides us facility to change the CSS property of the object. In this article we will learn increase and decrease font-size using JavaScript.

In Example just Click Plus or Minus button to Increase or Decrease the font size using Javascript


<input type="button" class="increase" value=" + ">
<input type="button" class="decrease" value=" - "/>
<input type="button" class="resetMe" value=" = ">
<div>Click Respected Buttons to Increase or Decrease the Font </div>


 <script type="text/javascript" language="javascript" src=""></script>
 <script type="text/javascript">
           var originalSize = $('div').css('font-size');         
          // reset        
          $('div').css('font-size', originalSize);         
           // Increase Font Size          
          var currentSize = $('div').css('font-size');         
          var currentSize = parseFloat(currentSize)*1.2;          
          $('div').css('font-size', currentSize);         
          return false;          
           // Decrease Font Size       
           var currentFontSize = $('div').css('font-size');        
           var currentSize = $('div').css('font-size');        
           var currentSize = parseFloat(currentSize)*0.8;        
           $('div').css('font-size', currentSize);         
           return false;         

Leave a Reply

Notify of