位置：首页>> 网络编程>> JavaScript>> javascript 改变字体大小方法集合

javascript 改变字体大小方法集合

　　发布时间：2023-07-06 16:58:02　

标签：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>字体: 小中大</div> <div id="content"> asp之家 www.aspxhome.com 欢迎大家的光临。 </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> + 放大字体 | + 减小字体这个是设置body中所有的大小设置，不如上面的代码就控制正文的字体大小。大家可以根据自己的需要选用。注意多测试。 </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> 字体：[增加减小] <div id="art_content"> asp之家测试文本代码 </div> </body> </htmL>

投稿

javascript 改变字体大小方法集合

猜你喜欢