How to Increase Decrease Font Size of Page Using Jquery

 Posted On  | Yashwant Chavan | Views :- 7416

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="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Increase and Decrease Font Using Jquery and CSS</title>
    <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>
	 
</head>
<body>
<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>
</body>
</html>

Tags Jquery  Css 


HTML Comment Box is loading comments...

Hi I am Yashwant Chavan founder of www.technicalkeeda.com, 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



© technicalkeeda.com 2014