How to Increase Decrease Font Size of Page Using Jquery
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>How to Increase Decrease Font Size of Page Using Jquery</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>
<h1>How to Increase Decrease Font Size of Page Using Jquery </h1>
<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>
