js控制文字大中小显示代码
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 我们经常会看到很网站的文章都可以自定字体的大小中号，下面我来给大家推荐一个js控制文字大中小显示代码，有需要的同学可参考。...
|
js控制文字大中小显示
| 代码如下 |
复制代码 |
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js控制文字大中小显示</title>
</head>
<body>
<script language="javascript">
function setFontSize(objID,size){
document.getElementById(objID).style.fontSize=size+'px';
}
</script>
<div id="content">
<p>本站一个php程序员的工作生活笔记,本站包含了php网络编程,数据库(主要是MySQL和Access数据库),javascript,jquery,div+css,html,windows系统,linux系统以及健康养生方面的学习笔记和生活经验积累!</p>
</div>
<a onclick="setFontSize('content',20)">大</a>
<a onclick="setFontSize('content',14)">中</a>
<a onclick="setFontSize('content',12)">小</a>
</body>
</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 作为字体单位的。 |
