Increase and Decrease Font Size Using jQuery

I was asked very recently on a forum how to increase and decrease the font size of an <a> tag using JavaScript. I said this is how you’d do it using jQuery.

Note: I have used an ASP.NET LinkButton in this example, however if you are using this example on a HTML Page, you can easily replace this control with a Hyperlink.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Increase and Decrease Font Using Jquery and CSS</title>
    <script type="text/javascript" language="javascript"
        src="http://code.jquery.com/jquery-latest.js"></script>   
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            var lb = $('a[id$=LinkButton1]');
            $("input[id$=btnIncrease]").click(function() {
                var size = $(lb).css("font-size");
                var newSize = parseInt(size.replace(/px/, "")) + 1;
                $(lb).css("font-size", newSize + "px");
            });
            $("input[id$=btnDecrease]").click(function() {
                var size = $(lb).css("font-size");
                var newSize = parseInt(size.replace(/px/, "")) - 1;
                $(lb).css("font-size", newSize + "px");
            });
        });
    </script>   
</head>
<body>
    <form id="form1" runat="server">
    <asp:LinkButton ID="LinkButton1" runat="server">
        Sample Text</asp:LinkButton><br />
    <input id="btnIncrease" type="button" value="   +   " />
    <input id="btnDecrease" type="button" value="   -   " />   
    </form>
</body>
</html>

I have attached code to run on both button’s click events. I first fetch the current size of the <a> tag then replace the px with an empty string. Then I increase or decrease the size by one:

var size = $(lb).css("font-size");
var newSize = parseInt(size.replace(/px/, "")) + 1;

Then I use the css method to set the font-size. Nice and simple.

You can see a Live Demo

About The Author

Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET and regular presenter at conferences and user groups throughout Australia. Being an ASP.NET Insider, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with JavaScript. He also blogs regularly at DotNetCurry.com. Follow him on twitter @malcolmsheridan

Increase and Decrease Font Size Using jQuery

About The Author

1 comment:

Labels