JavaScript: click the button to enlarge or reduce the font, And the javascript font
This article will share with you the js implementation, click the button font to zoom in and out the instance Code. The Code is easy to understand. For more information, see.
The Code is as follows:
<Style>. bb {color: red ;}. cc {color: green ;}. chapter {font-size: 1.5em ;}. normal {font-size: 12px ;}. hidden {display: none ;}</style> <script >$ (document ). ready (function () {$ ('div. aa '). addClass ('bb '); $ ('a [href ^ = "http:"]'). addClass ('cc'); // $ ('# switcher-large '). on ('click', function () {// $ ('div. large '). addClass ('Chapter '); //}); $ (' # switcher-large '). click (function () {$ ('div. large '). toggleClass ('Chapter '); $ (this ). toggleClass ('bb ') ;}); // $ (' # switcher '). click (function () {// click the button to add (remove) the style (toggleClass method) // $ ('# switcher button '). toggleClass ('den den '); // zoom in and out the font var $ biger =$ ('div. large '); var num = parsefloat(javasbiger.css ('fontsize'); $ (' # switcher-bigger '). click (function () {num = num * 1.4;$$biger.css ('fontsize', num + 'px') ;}); $ ('# switcher-small '). click (function () {num = num/1.4;$biger.css ('fontsize', num + 'px ');});}); </script> <div id = "switcher" class = "switcher">
I would like to introduce so much about how to zoom in and zoom out the font of the buttons in JavaScript. I hope this will be helpful to you!
Articles you may be interested in:
- Js calls the printer to print web page fonts, which always reduces the number one