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>

Tags Jquery  Css 

HTML Comment Box is loading comments...

Hi I am Yashwant Chavan founder of, Purpose of this website to share the programming knowledge in the form post , blogs and articles.

Latest Updates

Stay updated with latest post, articles and technical discussions.

Most Popular Articles

© 2015

 |  Find us on Google+ |  Rss Feed

Loaded in 0.0122 seconds.