Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Increase decrease font size using jquery

Suggested Videos
Part 48 - Simple jquery progress bar
Part 49 - Optimize jquery progress bar
Part 50 - jquery show hide password

In this video we will discuss how to increase, decrease and reset font size using jQuery.

increase decrease font size using jquery

        .divClass {
            font-size: 16px;
            background-color: #E3E3E3;
            width: 500px;
            padding: 5px;
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#linkIncrease').click(function () {

            $('#linkDecrease').click(function () {

            $('#linkReset').click(function () {

            function modifyFontSize(flag) {
                var divElement = $('#divContent');
                var currentFontSize = parseInt(divElement.css('font-size'));

                if (flag == 'increase')
                    currentFontSize += 3;
                else if (flag == 'decrease')
                    currentFontSize -= 3;
                    currentFontSize = 16;

                divElement.css('font-size', currentFontSize);
<body style="font-family:Arial">
    <a id="linkIncrease" href="#">Increase</a>
    <a id="linkDecrease" href="#">Decrease</a>
    <a id="linkReset" href="#">Reset</a>
    <br /><br />
    <div id="divContent" class="divClass">
        <b>jQuery Tutorial</b>
            <li>What is jQuery</li>
            <li>What is $(document).ready(function() in jquery</li>
            <li>Benefits of using CDN</li>
            <li>#id selector</li>
            <li>Element Selector</li>
            <li>class selector</li>
            <li>attribute selector</li>
            <li>attribute value selectors</li>
            <li>case insensitive attribute selector</li>
            <li>jQuery input vs :input</li>

jQuery tutorial for beginners


  1. Hi venkat
    For one page its very good to use this approach.But If we want to use the increasr/decrease font size to the other pages when we navigate to other page in stie how to maintain the same increased or decreased site to that pages.

    1. May be You have to use js in external file and can used localStorage Object.


It would be great if you can help share these free resources