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

HTML

<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>

JavaScript

 <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>
 <script type="text/javascript">
         $(document).ready(function(){        
           var originalSize = $('div').css('font-size');         
          // reset        
           $(".resetMe").click(function(){           
          $('div').css('font-size', originalSize);         
           });
         
           // Increase Font Size          
           $(".increase").click(function(){         
          var currentSize = $('div').css('font-size');         
          var currentSize = parseFloat(currentSize)*1.2;          
          $('div').css('font-size', currentSize);         
          return false;          
          });        
		  
           // Decrease Font Size       
           $(".decrease").click(function(){        
           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;         
           });         
         });
         
      </script>

Leave a Reply

Your email address will not be published. Required fields are marked *