通过JavaScript控制字体大小的代码

更新时间：2011年10月04日 20:02:59 作者：

这个脚本会改变一个段落内的任何文字的字体大小（<P>标签）。如果你想改变其他标签内的文本编辑的getElementsByTagName（"P"）;的一部分。

为了此代码到您的网页必须使用像素大小的字体（PX），而不是相对大小的字体，使用“EM”或“％”。当然如果你使用其他字体单位的代码可以很容易地适应这些。如果脚本不能找到一个段落的字体大小，它会默认为12px。
核心代码:

var min=8;
var max=18;
function increaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }
}

包括上面的代码在您的网页（无论是放置在头部分，或将其放置在一个外部JS文件和进口）。然后可以调用的增加和减少象下面的字体大小的功能。
使用方法：

复制代码代码如下:

<a href="javascript:decreaseFontSize();">-</a> 
<a href="javascript:increaseFontSize();">+</a>

您可能感兴趣的文章:

关于layui时间回显问题的解决方法
今天小编就为大家分享一篇关于layui时间回显问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
使用javascript为网页增加夜间模式
如何给Web页面增加夜间模式功能? 其实所谓的夜间模式就是在页面上增加一个透明的遮罩层，但是遮罩层会挡住页面元素，解决方法是添加DIV，给DIV的outline属性一个很大的outline-width值，用outline的边框作为遮罩，这样既能正常点击页面元素，又能达到夜间模式的效果
2014-01-01
JavaScript实现快速排序的方法分析
这篇文章主要介绍了JavaScript实现快速排序的方法,结合实例形式分析了快速排序的原理、实现方法及相关操作注意事项,需要的朋友可以参考下
2018-01-01
仿谷歌主页js动画效果实现代码
昨天看到谷歌的主页上出现了几个动画，发现不是flash做的，而是用js+图片实现的！今天把拷贝到的图片，用js实现了动画效果！
2013-07-07
Javascript 刷新全集常用代码
Javascript刷新页面实现代码，需要的朋友可以参考下。
2009-11-11
JavaScript中错误正确处理方式小结你用对了吗
本文将会讨论客户端JavaScript中的错误处理。主要介绍JavaScript中的易犯错误、错误处理、异步代码编写等内容。下面就让我们一起看看如何正确处理JavaScript中的错误
2017-10-10
js中递归函数的使用介绍
所谓的递归函数就是在函数体内调用本函数。使用递归函数一定要注意，处理不当就会进入死循环。递归函数只有在特定的情况下使用，比如阶乘问题
2012-10-10
一句话JavaScript表单验证代码
纯属技术交流，在实际应用中不建议那么做。建议js加载比较好。
2009-08-08
微信小程序云开发之使用云存储
这篇文章主要为大家详细介绍了微信小程序云开发之使用云存储，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
JavaScript实现的3D旋转魔方动画效果实例代码
在本篇文章里小编给大家整理了关于JavaScript实现的3D旋转魔方动画效果实例代码，有兴趣的朋友们测试下。
2019-07-07