Home > Developer > JavaScript
Copy codeThe Code is as follows:
/*
Increase, decrease, and restore the original font size on the page.
Three elements need to be defined in the html page
The element classes are resetFont, increaseFont, and decreaseFont.
The JQuery events in this file define the click events of the three elements to increase, decrease, and restore the original size.
*/
$ (Function (){
// Obtain the font size. The 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 downward.
Return false;
});
// Increase the font size. 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 to remove suffix
Var currentFontSizeNumber = parseFloat (currentFontSize );
// New defined font size
Var newFontSize = currentFontSizeNumber * 1.1;
// Rewrite the style sheet
$ ("Html" ).css ("font-size", newFontSize );
// JavaScript is not executed downward.
Return false;
});
// Reduce the font size. 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. Convert parseFloat () to float type to remove suffix
Var currentFontSizeNumber = parseFloat (currentFontSize );
// Redefine the font size
Var newFontSize = currentFontSizeNumber * 0.9;
// Rewrite the style sheet
$ ("Html" ).css ("font-size", newFontSize );
// JavaScript is not executed downward.
Return false;
});
});
Changes the webpage font size in real time. jQuery version
Modify the webpage font size in a timely manner, introduce jQuery, and limit the maximum number of digits or multiples that can be zoomed in the font to avoid meaningless functions, when the font is smaller than the specified value, clicking zoom in again does not work. This seems more user-friendly.
<! 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> modify the webpage font size in a timely manner. For jQuery </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> </pead> <body> zoom in and out <p id = "para"> 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. </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
