JS control text large and small display
The code is as follows |
Copy Code |
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title>js control text Large and small display </title> <body> <script language= "JavaScript" > function Setfontsize (objid,size) { document.getElementById (objid). style.fontsize=size+ ' px '; } </script> <div id= "Content" > <p> Site A PHP Programmer's working life notes, this site contains the PHP network programming, database (mainly MySQL and Access database), javascript,jquery,div+css,html,windows system, Learning notes and life experience accumulation in Linux systems and health!</p> </div> <a onclick= "setfontsize (' content ')" > Big </a> <a onclick= "setfontsize (' content ')" > </a> <a onclick= "setfontsize (' content ', ')" > Small </a> </body>
|
Jqeury Implementation method
The first page is the HTML section:
The code is as follows |
Copy Code |
<ul id= "Resizer" > <li id= "F_text" > Font size:</li> <li id= "f_s" ><a href= "javascript:void (0)" > Small </a></li> <li id= "f_m" ><a href= "javascript:void (0)" > </a></li> <li id= "f_l" ><a href= "javascript:void (0)" > Big </a></li> </ul>
|
Next, don't forget to introduce the JQuery library, this is not much to say, just a reminder, the last is a few lines of simple execution code:
The code is as follows |
Copy Code |
$ (document). Ready (function () { $ (' #resizer li '). Click (function () { var fontsize = 1.4; var name = $ (this). attr (' id '); if (name = = ' f_s ') { FontSize-= 0.1 else if (name = = ' f_l ') { FontSize + 0.1 else if (name = = ' F_m ') { FontSize = 1.4 } $ ('. Entry P '). css (' font-size ', FontSize + ' em ')//'. Entry P ' is the selector of the body to control }); });
|
The code is very simple, I like this streamlined but the effect of obvious effect, also very good understanding, because I am the whole station font with the unit EM, so the above JQuery code is also in the EM as units, individuals or compared to the recommended EM as font units.