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 相关文章推荐
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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连接MYSQL成功与否的代码
2013/08/16 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
用js遍历 table的脚本
2008/07/23 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
pandas重新生成索引的方法
2018/11/06 Python
python的常用模块之collections模块详解
2018/12/06 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
致跳远运动员广播稿
2014/02/11 职场文书
四议两公开实施方案
2014/03/28 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
python非标准时间的转换
2021/07/25 Python
MySQL中order by的使用详情
2021/11/17 MySQL
SQL Server 中的事务介绍
2022/05/20 SQL Server