Jquery - Using a button's click event to change font size

Using a button's click event to change font size of text is an interesting tip. I'll demonstrate this technique as the following example:
- I make a "fake button" by using a CSS decorated hyperlink .
- I add an event listener to the click event of the button.

Click the button, then text will be increased upto 2x. The button's label "Make it bigger" will be changed to "Make it smaller"

After the size's text was bigger, I you desire to get text smaller, click the button "Make it smaller"

Javascript:

<script>
    var changed=false;

    function changefont(){
    if(changed==false)
    {
        $(".content_left").css('font-size','200%','font-color','red');

        var x=   document.getElementsByClassName("myButton");
        $(".myButton").text("Make it smaller");

        changed=true;
    }
else
    {
        $(".content_left").css('font-size','100%','font-color','black');
        var x=   document.getElementsByClassName("myButton");
        $(".myButton").text("Make it bigger");
        changed=false;
    }
    }

    (function (){
         var x=   document.getElementsByClassName("myButton");
        x[0].addEventListener("click",changefont,false);
})();

</script>

About Chien

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.