通过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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 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聊天室技术
2006/10/09 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
红色旅游心得体会
2014/09/03 职场文书
八一建军节演讲稿
2014/09/10 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python