Copy Code code as follows:
/*
increase, shrink, and restore the original size of the font on the page
Need to define three elements in an HTML page
The class of the element is Resetfont, Increasefont, Decreasefont
The three-element click event is defined in the jquery event in this file to increase, shrink, and restore the original size
*/
$ (function () {
Gets the font size, which is defined under HTML tags font-size
var originalfontsize = $ ("html"). CSS ("font-size");
Restore default font size
$ (". Resetfont"). Click (function () {
$ ("HTML"). CSS ("Font-size", originalfontsize);
JavaScript does not execute down
return false;
});
Enlarge font, the class of an element is defined as Increasefont
$ (". Increasefont"). Click (function () {
Gets the current font size suffix px,pt,pc
var currentfontsize = $ ("html"). CSS ("font-size");
Gets the current font size, parsefloat () to the float type to remove the suffix
var currentfontsizenumber = parsefloat (currentfontsize);
The newly defined font size
var newfontsize = Currentfontsizenumber * 1.1;
overriding style sheets
$ ("HTML"). CSS ("Font-size", newfontsize);
JavaScript does not execute down
return false;
});
Decrease font, the class of an element is defined as Decreasefont
$ (". Decreasefont"). Click (function () {
Gets the current font size suffix px,pt,pc
var currentfontsize = $ ("html"). CSS ("font-size");
Gets the current font size, parsefloat () to the float type to remove the suffix
var currentfontsizenumber = parsefloat (currentfontsize);
Redefine font size
var newfontsize = Currentfontsizenumber * 0.9;
overriding style sheets
$ ("HTML"). CSS ("Font-size", newfontsize);
JavaScript does not execute down
return false;
});
});
Real-time change of page font size, jquery version
Change the font size of the Web page in time, introduce jquery, and add a limit to the number of digits that can be magnified or minimized, and avoid meaningless features, and when the font is small to the specified value, clicking again to reduce the function has no effect, and it seems more humane.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> change page font size, jquery version </title> <style> * {margin:0; padding:0;} . msg {width:300px; margin:100px;} . msg_caption {width:100%; overflow:hidden; margin-bottom:1px;} . msg_caption span {display:block; float:left; margin:0 2px; PADDING:4PX 10px; Background: #898989; Cursor:pointer;font-size:12px;color:white; }. msg textarea{width:300px; height:80px;height:100px;border:1px solid #000;} </style> <!--introduce jquery--> <script src= "Http://demo.jb51.net/jslib/jquery/jquery1.3.2.js type=" text/ JavaScript "></script> <script type=" Text/javascript > $ (function () {$ ("span"). Click (function () {var Thisele = $ ("#para"). CSS ("font-size"); var textfontsize = parsefloat (ThiselE, 10); var unit = Thisele.slice (-2); Get unit var CName = $ (this). attr ("class"); if (CName = = "bigger") {if (textfontsize <=) {textfontsize = 2; }}else if (cName = = "smaller") {if (textfontsize >=) {textfontsize-= 2; } $ ("#para"). CSS ("Font-size", textfontsize + unit); }); }); </script> </pead> <body> <div class= "msg" > <div class= "msg_caption" > <span class= "bi Gger "> Zoom </span> <span class=" Smaller "> Narrowing </span> </div> <div> <p id=" Para "> T The is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
