jquery实现控制文字分别以 大,中,小 三种方式显示浏览文章内容的文字大小。
1,jquery版 控制页面字体大小:
复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>控制页面字体大小-www.jb200.com</title>
<script src="/jquery/1.8.0/jquery.min.js"></script>
<style>
body{font-size:12px;}
</style>
</head>
<body>
<script type="text/
javascript">
$(document).ready(function() {
});
function font_size(psize) {
$('#content').css('fontSize', psize);
}
</script>
111
<br />
<span onclick="font_size(20)">大</span> <span onclick="font_size(12)">中</span> <span onclick="font_size(10)">小</span><br />
<div id="content">
脚本学堂-www.jb200.com,测试下控制字体大小。</div>
</body>
</html>
以上是jquery实现的,这里再分享一个javascript版的控制页面字体大小的例子。
代码:
复制代码 代码示例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js控制文字大中小显示-www.jb200.com</title>
</head>
<body>
<script language="javascript">
function setFontSize(objID,size){
document.getElementById(objID).style.fontSize=size+'px';
}
</script>
<div id="content">
<p>脚本学堂,提供丰富的脚本编程、网站编程、
数据库等技术文章。</p>
</div>
<a onclick="setFontSize('content',20)">大</a>
<a onclick="setFontSize('content',14)">中</a>
<a onclick="setFontSize('content',12)">小</a>
</body>
</html>