js简单实现调整网页字体大小的方法


Posted in Javascript onJuly 23, 2016

本文实例讲述了js简单实现调整网页字体大小的方法。分享给大家供大家参考,具体如下:

//var tgs = new Array('div','td','tr');
var tgs = new Array('td','tr');
//Specify spectrum of different font sizes:
//var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var szs = new Array( '10px','12px','14px','16px','18px','20px','22px' );
var startSz = 2;
function tsize( trgt,inc ) {
  if (!document.getElementById)
  {
    return
  }
  var d = document,cEl = null,sz = startSz,i,j,cTags;
  //sz += inc;
  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 ];
    }
  }
}

使用方法:

<td width="13">
<a href="javascript:tsize('body',0)">
<img src="../image/fsize1of.gif"
name="fsize1" width="18" height="14" border="0" id="fsize1"
onMouseOver="MM_swapImage('fsize1','','../image/fsize1on.gif',1)"
onMouseOut="MM_swapImgRestore()"></a>
</td>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
jquery实现ajax加载超时提示的方法
Jul 23 #Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 #Javascript
js的各种排序算法实现(总结)
Jul 23 #Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 #Javascript
javaScript事件机制兼容【详细整理】
Jul 23 #Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 #Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 #Javascript
You might like
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
php url路由入门实例
2014/04/23 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
iView框架问题整理小结
2018/10/16 Javascript
小程序实现搜索框
2020/06/19 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
python字典快速保存于读取的方法
2018/03/23 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
关于python中remove的一些坑小结
2021/01/04 Python
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
解除劳动合同协议书范本
2014/09/13 职场文书
订货会邀请函
2015/01/31 职场文书
市场部岗位职责
2015/02/12 职场文书
化验室岗位职责
2015/02/14 职场文书
2015年端午节活动方案
2015/05/05 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
Python各协议下socket黏包问题原理
2022/04/12 Python