How to Increase, Decrease and Reset Font Size using jQuery Functions

  1. <html>  
  2. <head>  
  3. <style>  
  4. .divClass {  
  5.     font-size: 16px;  
  6.     padding: 10px;  
  7. }  
  8. </style>  
  9. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  10. <script type="text/javascript">  
  11.         $(document).ready(function () {  
  12.             $('#linkIncrease').click(function () {  
  13.                 modifyFontSize('increase');  
  14.             });  
  15.   
  16.             $('#linkDecrease').click(function () {  
  17.                 modifyFontSize('decrease');  
  18.             });  
  19.   
  20.             $('#linkReset').click(function () {  
  21.                 modifyFontSize('reset');  
  22.             })  
  23.   
  24.             function modifyFontSize(flag) {  
  25.                 var divElement = $('#divContent');  
  26.                 var currentFontSize = parseInt(divElement.css('font-size'));  
  27.   
  28.                 if (flag == 'increase')  
  29.                     currentFontSize += 3;  
  30.                 else if (flag == 'decrease')  
  31.                     currentFontSize -3;  
  32.                 else  
  33.                     currentFontSize = 16;  
  34.   
  35.                 divElement.css('font-size', currentFontSize);  
  36.             }  
  37.         });  
  38.     </script>  
  39. </head>  
  40.   
  41. <body style="font-family:Arial">  
  42. Font-Size:   
  43. <a id="linkIncrease" href="#"><b>+</b></a>  
  44.  
  45. <a id="linkDecrease" href="#"><b>-</b></a>   

  46. <a id="linkReset" href="#">   <b>X</b></a>   

  47. <br />  
  48. <br />  
  49. <div id="divContent" class="divClass"> jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today. jQuery is free,  open-source software licensed under the MIT License. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides   capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced   effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications. </div>  
  50. </body>  
  51. </html>  
Paste the above code in Notepad and Save the file as .HTML and RUN.