首页 > 网络编程 > JavaScript > javascript技巧 > 大中小字体显示

javascript 大中小字体显示实现代码

2010-09-06 17:45:41 作者：

有时候页面中的正文一般都加上了字体大中小控制代码，方便浏览者阅读。

<!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> 
<title>大中小字体显示</title> 
</head> 
<body> 
<a href="#" onclick="changeFontSize(document.getElementById('content'),this.style.fontSize);return false;" 
style="font-size: 16px;">大</a> 
<a href="#" onclick="changeFontSize(document.getElementById('content'),this.style.fontSize);return false;" 
style="font-size: 14px;">中</a> 
<a href="#" onclick="changeFontSize(document.getElementById('content'),this.style.fontSize);return false;" 
style="font-size: 12px;">小</a> 
<div id="content"> 
京藏高速通畅四天后再次堵车上百公里 
<p> 
<font size="3">&nbsp;&nbsp;&nbsp; 昨日上午8点，央视记者沿鄂尔多斯历时3个多小时，仅行进120多公里， 
到达河北东洋河收费站。此时，收费站双向放行，交通拥堵有所缓解。</font></p> 
<p> 
<font size="3">&nbsp;&nbsp;&nbsp; 据了解，截至昨日中午12点，内蒙古境内拥堵情况最长达120公里。 
据测算，上万车辆滞留。 其主要原因一是大货车停车后，启动速度慢，二是不少大货车司机堵车期间睡着了。</font></p> 
</div> 
<script language="javascript"> 
function changeFontSize(pucl,size) 
{ 
if(pucl.style) 
pucl.style.fontSize=size; 
for(var i=0;i<pucl.childNodes.length;i++) 
{ 
changeFontSize(pucl.childNodes[i],size) 
} 
} 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]