javascript 改变字体大小方法集合

最新推荐文章于 2024-01-02 14:04:58 发布

manabone

最新推荐文章于 2024-01-02 14:04:58 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： JavaScript ViewUI

本文链接：https://blog.youkuaiyun.com/manabone/article/details/84283256

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了三种使用JavaScript改变网页字体大小的方法。第一种是通过指定ID来改变特定元素的字体大小；第二种是调整整个body内所有元素的字体大小；第三种提供增减字体大小的功能，适用于需要动态调整字体的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>