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程序设计有所帮助。

相关文章

  • 微信小程序实现炫酷的弹出式菜单特效

    微信小程序实现炫酷的弹出式菜单特效

    这篇文章主要为大家详细介绍了微信小程序实现炫酷的弹出式菜单特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • 理解JavaScript中window对象的一些用途

    理解JavaScript中window对象的一些用途

    这篇文章主要介绍了理解JavaScript中的window对象,本文通过实例代码详细介绍Window对象的一些重要用途,需要的朋友可以参考下
    2022-07-07
  • PixiJS学习之如何实现文字的绘制

    PixiJS学习之如何实现文字的绘制

    PixiJS是一个开源的基于web的渲染系统,为游戏、数据可视化和其他图形密集型项目提供了极快的性能。这篇文章主要带大家学习一下PixiJS是如何实现文字绘制的,希望对大家有所帮助
    2023-02-02
  • echarts实现饼图与样式设置

    echarts实现饼图与样式设置

    这篇文章介绍了echarts实现饼图与样式设置的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • JavaScript中的迭代器和可迭代对象与生成器

    JavaScript中的迭代器和可迭代对象与生成器

    这篇文章主要介绍了JavaScript中的迭代器和可迭代对象与生成器,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • javascript显示倒计时控制按钮的简单实现

    javascript显示倒计时控制按钮的简单实现

    下面小编就为大家带来一篇javascript显示倒计时控制按钮的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JavaScript事件机制的剖析与优化详解

    JavaScript事件机制的剖析与优化详解

    在现代前端开发中,JavaScript事件处理是一个至关重要的部分,它能够使网页与用户交互,实现丰富的交互体验,然而,对JavaScript事件机制的深入理解是开发者成为优秀前端工程师的关键所在,本文将全面剖析JavaScript事件机制,需要的朋友可以参考下
    2023-12-12
  • JavaScript中正则表达式的实际应用详解

    JavaScript中正则表达式的实际应用详解

    这篇文章主要给大家介绍了关于JavaScript中正则表达式实际应用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 防止网站内容被小偷采集的js代码

    防止网站内容被小偷采集的js代码

    防止网站内容被小偷采集的js代码...
    2006-09-09
  • 如何手动实现一个 JavaScript 模块执行器

    如何手动实现一个 JavaScript 模块执行器

    这篇文章主要介绍了如何手动实现一个 JavaScript 模块执行器,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2020-10-10

最新评论