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 相关文章推荐
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
Vue.js自定义指令学习使用详解
Oct 19 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 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
Python类成员继承重写的实现
2020/09/16 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
人事部主管岗位职责
2013/12/26 职场文书
行政人事岗位职责
2014/03/17 职场文书
2014年财政工作总结
2014/12/10 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
Vue操作Storage本地化存储
2022/04/29 Vue.js