js简单实现调整网页字体大小的方法

 更新时间:2016年07月23日 11:24:34   作者:coder  
这篇文章主要介绍了js简单实现调整网页字体大小的方法,通过javascript动态修改页面元素样式实现调整网页字体的功能,非常简单实用,需要的朋友可以参考下

本文实例讲述了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查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • jquery单行文字向上滚动效果的实现代码

    jquery单行文字向上滚动效果的实现代码

    这篇文章主要介绍了jquery单行文字向上滚动效果的具体实现,此效果适应于很多场景,会的不会的都要学习下啊
    2014-09-09
  • 老生常谈JavaScript面向对象基础与this指向问题

    老生常谈JavaScript面向对象基础与this指向问题

    下面小编就为大家带来一篇老生常谈JavaScript面向对象基础与this指向问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Storage、cookie的用途和优缺点比较

    Storage、cookie的用途和优缺点比较

    cookie的大小是受限制的,并且每次请求cookie都会被发送,浪费宽带,cookie还需要指定作用域,不可以跨域调用。cookie的作用是与服务器进行交互,作为http规范的一部分存在,而webstorage仅仅是为了本地“存储”数据而生。
    2023-07-07
  • Redux的基本使用过程步骤详解

    Redux的基本使用过程步骤详解

    这篇文章主要介绍了Redux的基本使用过程详解,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • JavaScript实现实时更新系统时间的实例代码

    JavaScript实现实时更新系统时间的实例代码

    本文给大家分享javascript实现实时更新系统时间的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-04-04
  • bootstrap基础知识学习笔记

    bootstrap基础知识学习笔记

    这篇文章主要针对bootstrap基础知识为大家整理了详细的学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 比JSON.stringify快两倍的fast-json-stringify性能对比分析

    比JSON.stringify快两倍的fast-json-stringify性能对比分析

    这篇文章主要为大家介绍了比JSON.stringify快两倍的fast-json-stringify性能对比分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • webpack打包node.js后端项目的方法

    webpack打包node.js后端项目的方法

    本篇文章主要介绍了webpack打包node.js后端项目的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 某人初学javascript的时候写的学习笔记

    某人初学javascript的时候写的学习笔记

    JavaScript对象就是一组属性(方法)的集合 在该语言中如果变量名或方法名不符合声明规范,则一定得用方括号“ [] ”引用它
    2010-12-12
  • setTimeout自动触发一个js的方法

    setTimeout自动触发一个js的方法

    本文为大家介绍下使用setTimeout自动触发一个js,具体实现如下,喜欢的朋友可以学习下
    2014-01-01

最新评论