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>
分享到：
相关推荐
第一种方法： 分为 大 中 小 控制正文字体大小，一般需要指定 id #content {font-size:12px; line-height:200%; padding:10px; } 字体: 小中大 软件开发网 www.jb51.net 欢迎大家的光临。 [Ctrl+A 全选 ...
给网页正文提供，小 中 大 三种字体的切换功能。用js代码设置div style的fontSize属性。
您可以更改图标的颜色，背景颜色，大小，并且可以搜索或缓存选定的结果。 更新：现在，您可以直接从在线下载PNG，JPG，ICO和Apple ICNS图像文件。 :large_orange_diamond: 已发布于Windows，Linux，MacOS的或goto :...
增强的视觉布局预检器，将允许你通过使用打印选项调整页面大小 灵活的DPI输出选项，可设置范围：50-2400 支持中日韩字体/字符 添加水印或覆盖PDF文档，从而生成新的PDF并输出。 – 是企业文具使用的理想选择 自动...
QuickEdit是一款适用于Android设备的快速，稳定且功能齐全的文本编辑器。...✓最大字体大小增加到56sp。 ✓感谢Vadim Vergasov加入白俄罗斯语翻译！ ✓感谢Filip Marius，添加罗马尼亚语翻译！ ✓小错误修复。
Overloaded的方法是否可以改变返回值的类型? 14 19、构造器Constructor是否可被override? 15 20、接口是否可继承接口? 抽象类是否可实现(implements)接口? 抽象类是否可继承具体类(concrete class)? 抽象类中是否...
Overloaded的方法是否可以改变返回值的类型? 14 19、构造器Constructor是否可被override? 15 20、接口是否可继承接口? 抽象类是否可实现(implements)接口? 抽象类是否可继承具体类(concrete class)? 抽象类中是否...
Overloaded的方法是否可以改变返回值的类型? 14 19、构造器Constructor是否可被override? 15 20、接口是否可继承接口? 抽象类是否可实现(implements)接口? 抽象类是否可继承具体类(concrete class)? 抽象类中是否...
Overloaded的方法是否可以改变返回值的类型? 14 19、构造器Constructor是否可被override? 15 20、接口是否可继承接口? 抽象类是否可实现(implements)接口? 抽象类是否可继承具体类(concrete class)? 抽象类中是否...
Overloaded的方法是否可以改变返回值的类型? 14 19、构造器Constructor是否可被override? 15 20、接口是否可继承接口? 抽象类是否可实现(implements)接口? 抽象类是否可继承具体类(concrete class)? 抽象类中是否...
Overloaded的方法是否可以改变返回值的类型? 15 19、构造器Constructor是否可被override? 16 20、接口是否可继承接口? 抽象类是否可实现(implements)接口? 抽象类是否可继承具体类(concrete class)? 抽象类中是否...
Overloaded的方法是否可以改变返回值的类型? 14 19、构造器Constructor是否可被override? 15 20、接口是否可继承接口? 抽象类是否可实现(implements)接口? 抽象类是否可继承具体类(concrete class)? 抽象类中是否...
Overloaded的方法是否可以改变返回值的类型? 14 19、构造器Constructor是否可被override? 15 20、接口是否可继承接口? 抽象类是否可实现(implements)接口? 抽象类是否可继承具体类(concrete class)? 抽象类中是否...
Overloaded的方法是否可以改变返回值的类型? 14 19、构造器Constructor是否可被override? 15 20、接口是否可继承接口? 抽象类是否可实现(implements)接口? 抽象类是否可继承具体类(concrete class)? 抽象类中是否...