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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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
php 不同编码下的字符串长度区分
2009/09/26 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
Python 将pdf转成图片的方法
2018/04/23 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
学python爬虫能做什么
2020/07/29 Python
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
一个SQL面试题
2014/08/21 面试题
教学改革实施方案
2014/03/31 职场文书
产品质量保证书
2014/04/29 职场文书
毕业评语大全
2014/05/04 职场文书
开工典礼策划方案
2014/05/23 职场文书
农村党员对照检查材料
2014/09/24 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
工作检讨书怎么写
2015/01/23 职场文书
教师节领导致辞
2015/07/29 职场文书
2016春季运动会前导词
2015/11/25 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers