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 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
Javascript地址引用代码实例解析
Feb 25 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
php实现计数器方法小结
2015/01/05 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python编写检测数据库SA用户的方法
2014/07/11 Python
python编程开发之日期操作实例分析
2015/11/13 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
Django中的cookie和session
2019/08/27 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
iPython pylab模式启动方式
2020/04/24 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
ASP.NET中的身份验证有那些
2012/07/13 面试题
学前教育见习总结
2015/06/23 职场文书
队名及霸气口号大全
2015/12/25 职场文书
2016党员党课心得体会
2016/01/07 职场文书
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers