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 相关文章推荐
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 Javascript
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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
全面了解js中的script标签
2016/07/04 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
python内存管理分析
2015/04/08 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Python List cmp()知识点总结
2019/02/18 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
副总经理工作职责
2013/11/28 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
高中生班主任评语
2014/04/25 职场文书
大二学习计划书范文
2014/04/27 职场文书
走进敬老院活动总结
2014/07/10 职场文书
活动总结范文
2014/08/30 职场文书
《春酒》教学反思
2016/02/22 职场文书
一文搞懂Redis中String数据类型
2022/04/03 Redis