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


Posted in Javascript onOctober 04, 2011

为了此代码到您的网页必须使用像素大小的字体(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>
Javascript 相关文章推荐
Js 刷新框架页的代码
Apr 13 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
vant时间控件使用方法详解
Dec 24 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 #Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 #Javascript
Dom 结点创建 基础知识
Oct 01 #Javascript
JavaScript 的继承
Oct 01 #Javascript
Jquery 的扩展方法总结
Oct 01 #Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 #Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 #Javascript
You might like
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
如何选购合适的收音机
2021/03/01 无线电
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
PHP实现简易计算器功能
2020/08/28 PHP
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
详解Python实现进度条的4种方式
2020/01/15 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
python中round函数保留两位小数的方法
2020/12/04 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
采购部长岗位职责
2014/06/13 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
推广活动策划方案
2014/08/23 职场文书
学生保证书格式
2015/02/27 职场文书
团委工作总结2015
2015/04/02 职场文书
监守自盗观后感
2015/06/10 职场文书
关于开学的感想
2015/08/10 职场文书
初中思想品德教学反思
2016/02/24 职场文书