jquery 控制页面字体大小的实例代码

发布时间:2019-12-11编辑:脚本学堂
分享一例控制页面字体大小的jquery代码,控制文字分别以 大,中,小 三种方式显示浏览文章内容的文字大小。有需要的朋友参考下。

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>