javascript 改变字体大小步骤集合-JavaSript-爱易网页

javascript 改变字体大小步骤集合

日期：2014-05-16　浏览次数：20436 次

javascript 改变字体大小方法集合
javascript 改变字体大小方法集合

第一种方法：分为大中小控制正文字体大小，一般需要指定 id

<!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"> 
<htmL> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
</head> 
<style> 
#content {font-size:12px; 
line-height:200%; 
padding:10px; 
} 
</style> 
<script language="javascript"> 
function setfont(size) 
{ 
var obj; 
obj=document.getElementById("content"); 
obj.style.fontSize=size; 
//obj.style.color="#ff0000"; 
} 
</script> 
<body> 
<div>字体: <a href="#" onclick="javascript:setfont('12px')">小</a><a href="#" onclick="javascript:setfont 
('18px');">中</a><a href="#" onclick="javascript:setfont('24px');">大</a></div> 
<div id="content"> 
hello world 
</div> 
</body> 
</htmL>

第二种方法，用的不多，有特殊需要的可以用。这个是设置body中所有的大小设置，不如上面的代码就控制正文的字体大小。大家可以根据自己的需要选用。注意多测试。

<script> 
var tgs = new Array( 'div','td','tr'); 
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' ); 
var startSz = 2; 
function ts( trgt,inc ) { 
if (!document.getElementById) return 
var d = document,cEl = null,sz = startSz,i,j,cTags; 
sz += inc; 
if ( sz < 0 ) sz = 0; 
if ( sz > 6 ) sz = 6; 
startSz = sz; 
if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ]; 
cEl.style.fontSize = szs[ sz ]; 
for ( i = 0 ; i < tgs.length ; i++ ) { 
cTags = cEl.getElementsByTagName( tgs[ i ] ); 
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ]; 
} 
} 
</script> 
<style> 
.tabfont{font-size:12px} 
</style> 
<body> 
<a href="javascript:ts('body',1)">+ 放大字体</a> | <a 
href="javascript:ts('body',-1)">+ 减小字体</a>
hello world
</body>

第三种方法：只有增加减小两种方法，不过很实用

<!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"> 
<htmL> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
</head> 
<style> 
#content {font-size:12px; 
line-height:200%; 
padding:10px; 
} 
</style> 
<script language="javascript"> 
//更改字体大小 
var status0=''; 
var curfontsize=10; 
var curlineheight=18; 
function turnsmall(){ 
if(curfontsize>10){ 
document.getElementById('art_content').style.fontSize=(--curfontsize)+'pt'; 
    document.getElementById('art_content').style.lineHeight=(--curlineheight)+'pt'; 
} 
} 
function turnbig(){ 
if(curfontsize<28){ 
document.getElementById('art_content').style.fontSize=(++curfontsize)+'pt'; 
    document.getElementById('art_content').style.lineHeight=(++curlineheight)+'pt'; 
} 
} 
</script> 
<body> 
字体：[<a href="javascript:turnbig()">增加</a> <a href="javascript:turnsmall()">减小</a>]
 
<div id="art_content"> 
文本
</div> 
</body> 
</htmL>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

javascript 改变字体大小步骤集合

相关资料更多>

推荐阅读更多>