通过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代码
Nov 09 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 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调用VC编写的COM组件实例
2014/03/29 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
利用js对象弹出一个层
2008/03/26 Javascript
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
浅谈python中set使用
2016/06/30 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
django实现支付宝支付实例讲解
2019/10/17 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
腾讯公司的一个sql题
2013/01/22 面试题
销售人员求职的自我评价分享
2014/03/15 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
狂人日记读书笔记
2015/06/30 职场文书
详解python网络进程
2021/06/15 Python
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android