通过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之六 缓存数据功能介绍
Jun 21 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
输入框跟随文字内容适配宽实现示例
Aug 14 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
php ZipArchive压缩函数详解实例
2013/11/06 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
PHP实现微信对账单处理
2018/10/01 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
Django 外键的使用方法详解
2019/07/19 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Python urllib3软件包的使用说明
2020/11/18 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
简约控的天堂:The Undone
2016/12/21 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
大学生创业计划书的范文
2014/01/07 职场文书
终止合同协议书
2014/04/17 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL