jQuery字体大小切换的实现代码

发布时间:2020-08-14编辑:脚本学堂
本文介绍下,用jquery实现字体大小切换的一例代码,学习下jquery控制页面元素的方法,有需要的朋友参考下。

jquery控制页面中字体大小切换的代码。

首页,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 为单位,比较好控制。