Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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 comment:

  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.


If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.