JQuery implementation code to change page font size (change web page font size in real time)_jquery

Copy code The code is as follows:

/*
Increase or reduce the font size on the page. To restore the original size
you need to define three elements in the html page
The classes of the elements are resetFont, increaseFont, and decreaseFont
In the JQuery event of this file, click events of the three elements are defined respectively to achieve the increase. Large, reduce, restore original size
*/
$(function () {
//Get the font size, font-size is defined under the html tag
var originalFontSize = $("html" ).css("font-size");
//Restore the default font size
$(".resetFont").click(function () {
$("html").css(" font-size", originalFontSize);
//JavaScript is not executed downwards
return false;
});

//Increase the font, and the class of an element is defined as increaseFont
$(".increaseFont").click(function () {
//Get the current font size suffix px,pt,pc
var currentFontSize = $("html").css("font- size");
//Get the current font size, convert parseFloat() to float type and remove the suffix
var currentFontSizeNumber = parseFloat(currentFontSize);
//Newly defined font size
var newFontSize = currentFontSizeNumber * 1.1;
//Rewrite the style sheet
$("html").css("font-size", newFontSize);
//JavaScript does not execute downwards
return false;
});

//Decrease the font, the class of an element is defined as decreaseFont
$(".decreaseFont").click(function () {
//Get the current Font size suffix px, pt, pc
var currentFontSize = $("html").css("font-size");
//Get the current font size, parseFloat() converts to float type to remove the suffix
var currentFontSizeNumber = parseFloat(currentFontSize);
//Redefine font size
var newFontSize = currentFontSizeNumber * 0.9;
//Rewrite style sheet
$("html").css( "font-size", newFontSize);
//JavaScript is not executed downwards
return false;
});
});

Change web fonts in real time Size, jQuery version
changes the font size of the web page in a timely manner, introduces jQuery, and adds restrictions on the maximum number of digits that can be enlarged or the minimum number of times that the font can be reduced, to avoid some meaningless functions, when the font size reaches the specified value , clicking the zoom out function again does not work. This seems to be more user-friendly.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Change the font size of the web page in a timely manner, 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> <!-- 引入jQuery --> <div class="msg"> <div class="msg_caption"> <span class="bigger"> </span> <span class="smaller">Zoom in</span> </div>Zoom out<div> <p id="para"> </p> </div> 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. This is some text. </div>
[Ctrl A select all Note:

If you need to introduce external Js, you need to refresh to execute ]