js控制文字大中小显示代码
发布时间：01/15 来源： 浏览：
关键词：
我们经常会看到很网站的文章都可以自定字体的大小中号，下面我来给大家推荐一个js控制文字大中小显示代码，有需要的同学可参考。
js控制文字大中小显示
| 代码如下 | |
|
<html> |
|
jqeury实现方法
首页是 HTML 部分：
| 代码如下 | |
| <ul id="resizer"> <li id="f_text">字号：</li> <li id="f_s"><a href="javascript:void(0)">小</a></li> <li id="f_m"><a href="javascript:void(0)">中</a></li> <li id="f_l"><a href="javascript:void(0)">大</a></li> </ul> |
|
接下来不要忘记引入 jQuery 库，这个就不多说了，只是提醒一下，最后就是几行简单的执行代码：
| 代码如下 | |
| $(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' 就是要控制的正文的选择器 }); }); |
|
代码还是很简单的，我就喜欢这样精简但效果明显的效果，也很好理解吧，因为我全站字体用的是单位 em，所以以上 jQuery 代码里也是以 em 为单位，个人还是比较推荐以 em 作为字体单位的。
