We often see that many articles on the website can customize the font size and medium size. Below I would like to recommend a js control text display code for you. If you need it, you can refer to it.
Javascript control text display
The Code is as follows: |
Copy code |
<Html> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> JavaScript control text display </title> </Head> <Body> <Script language = "javascript"> Function setFontSize (objID, size ){ Document. getElementById (objID). style. fontSize = size + 'px '; } </Script> <Div id = "content"> <P> the work and life notes of a php programmer on this site include php network programming, databases (mainly MySQL and Access databases), javascript, jquery, div + css, html, learning notes and life experience in windows, linux, and health and wellness! </P> </Div> <A onclick = "setFontSize ('content', 20)"> large </a> <A onclick = "setFontSize ('content', 14)"> medium </a> <A onclick = "setFontSize ('content', 12)"> small </a> </Body> </Html> |
Jqeury Implementation Method
The home page is in 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)"> medium </a> </li> <Li id = "f_l"> <a href = "javascript: void (0)"> large </a> </li> </Ul>
|
Next, don't forget to introduce the jQuery library. Let's just say a few simple lines of 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'0000.css ('font-size', fontSize + 'em') // '. entry P' is the selector of the body to be controlled. }); });
|
The code is still very simple. I like it to be streamlined, but the effect is obvious. It is also very easy to understand, because I use the unit em in the font of the entire site, so the above jQuery code is also in the unit em, we recommend that you use em as the font unit.