通过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 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
原生js实现放大镜组件
Jan 22 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
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
Yii学习总结之安装配置
2015/02/22 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
window.open的功能全解析
2006/10/10 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
JS打印组合功能
2016/08/04 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
主管会计岗位职责
2014/03/13 职场文书
代领毕业证委托书
2014/08/02 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript