Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Changing font-size using jquery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 351
    Comment on it

    In this tutorial I am going to explain how to change the font size of text content in a paragraph dynamically using jquery. We can change the font-size using jQuery css() function.When page will load font-size will be 14px .When user will click  Increase Font button  the font of the text will increase by 2px. When user will click Decrease Font  button the font of the text will decrease by 2px. Check out the demo to see how it works with the help of the given fiddle link.

    Working Demo: https://jsfiddle.net/qcng788n/24/

    The html of the page goes like:

    
    <p id="wrapper" style="height:260px">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
    </p>
    <button id="large">Large Font</button>
    <button href="#" id="small">Small Font</button>
    

    This is the css of the page is given below:

    #wrapper{background-color:#FF4F49;height:400px;color:#205081;height:260px}
    #large,#small{background-color:#23517F;color:#FF4F49;border:none;padding:15px 10px}

    The jquery goes like this:

    
     $(document).ready(function() { 
      $('#large').click(function(){    
            defaultSize= parseInt($('#wrapper').css('font-size')) + 1;
      if(defaultSize<=20)
            $('#wrapper').css('font-size', defaultSize);
            });  
      $('#small').click(function(){    
            defaultSize= parseInt($('#wrapper').css('font-size')) - 1;
      if(defaultSize>=12)
            $('#wrapper').css('font-size', defaultSize);
            }); 
     });

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: