javascript 改变字体大小方法集合 <font color=red>原创</font>

ttx9n · 发表于 2009-6-26 13:15:51

给网页正文提供，小中大三种字体的切换功能。用js代码设置div style的fontSize属性。

第一种方法：分为大中小控制正文字体大小，一般需要指定 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> 字体: <a href="#" onclick="javascript:setfont('12px')">小</a><a href="#" onclick="javascript:setfont ('18px');">中</a><a href="#" onclick="javascript:setfont('24px');">大</a> 脚本之家 www.jb51.net 欢迎大家的光临。 </body> </htmL>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
第二种方法，用的不多，有特殊需要的可以用。这个是设置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> 脚本之家 www.jb51.net 这个是设置body中所有的大小设置，不如上面的代码就控制正文的字体大小。大家可以根据自己的需要选用。注意多测试。 </body>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

第三种方法：只有增加减小两种方法，不过很实用，本站也是用的这种方法
<!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>] 脚本之家测试文本代码 </body> </htmL>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

回复用户5 · 发表于 2022-9-19 10:46:32

哈哈哈哈哈哈哈

123456 · 发表于 2022-11-8 03:30:52

强烈支持楼主ing……

回复用户5 · 发表于 2022-12-2 21:28:54

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

wxrf98xr · 发表于 2023-3-4 12:55:35

还不错啊

70r45_zs · 发表于 2023-8-31 00:26:51

来看看怎么样

JosephSA · 发表于 2023-10-6 13:02:06

66666666666666666666

plvo189 · 发表于 2023-10-11 20:56:49

源码源码源码源码源码源码源码源码源码源码源码源码源码

i1efp6c · 发表于 2023-12-5 19:38:10

额UI废物iuhfujewfiewnnfen

czoz5y · 发表于 2024-3-26 02:50:47

哦哦哦哦哦哦哦哦哦

账号		自动登录	找回密码
密码			立即注册

[JavaScript] javascript 改变字体大小方法集合 <font color=red>原创</font>

相关帖子