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


© technicalkeeda.com 2017

 |  Find us on Google+ |  Rss Feed

Loaded in 0.0395 seconds.