通过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 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
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
使用php实现截取指定长度
2013/08/06 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
opencv python图像梯度实例详解
2020/02/04 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
神路信息Java面试题目
2013/03/31 面试题
大学生实习鉴定评语
2014/04/25 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
初一新生军训方案
2014/05/22 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
公司员工安全协议书
2014/11/21 职场文书
奖学金感谢信
2015/01/21 职场文书