How to Increase Decrease Font Size of Page Using Jquery

 Posted On  | Yashwant Chavan 

Jquery provides facility to change the CSS property of the object. Here we are going to change the "font-size" dynamically on click of button

Change font size using Jquery

Click Plus or Minus button to Increase or Decrease the font size. $('div').css('font-size') returns the current font size, base on + or - click you can set the font size value to the div.

<html xmlns="" >
<head runat="server">
    <title>Increase and Decrease Font Using Jquery and CSS</title>
    <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;
<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>

© 2017

 |  Find us on Google+ |  Rss Feed

Loaded in 0.0306 seconds.