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 浮动广告实现代码
Dec 25 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
vue特效之翻牌动画
Apr 20 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返回当前日期或者指定日期是周几
2015/05/21 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
小程序实现录音功能
2020/09/22 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
python实现翻译word表格小程序
2020/02/27 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
运动会入场词100字
2014/02/06 职场文书
学校节能减排方案
2014/06/13 职场文书
六一儿童节活动总结
2014/08/27 职场文书
小学母亲节活动总结
2015/02/10 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript