- <html>
- <head>
- <style>
- .divClass {
- font-size: 16px;
- padding: 10px;
- }
- </style>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $('#linkIncrease').click(function () {
- modifyFontSize('increase');
- });
-
- $('#linkDecrease').click(function () {
- modifyFontSize('decrease');
- });
-
- $('#linkReset').click(function () {
- modifyFontSize('reset');
- })
-
- function modifyFontSize(flag) {
- var divElement = $('#divContent');
- var currentFontSize = parseInt(divElement.css('font-size'));
-
- if (flag == 'increase')
- currentFontSize += 3;
- else if (flag == 'decrease')
- currentFontSize -= 3;
- else
- currentFontSize = 16;
-
- divElement.css('font-size', currentFontSize);
- }
- });
- </script>
- </head>
-
- <body style="font-family:Arial">
- Font-Size:
- <a id="linkIncrease" href="#"><b>+</b></a>
-
- <a id="linkDecrease" href="#"><b>-</b></a>
- <a id="linkReset" href="#"> <b>X</b></a>
- <br />
- <br />
- <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>
- </body>
- </html>
Paste the above code in Notepad and Save the file as .HTML and RUN.