通过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+ajax实现动态执行脚本的方法
Jan 27 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
使用python实现链表操作
2018/01/26 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
python爬取内容存入Excel实例
2019/02/20 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
职务任命书范本
2014/06/05 职场文书
工商管理本科生求职信
2014/07/13 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
人事局接收函
2015/01/31 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
素质拓展训练感想
2015/08/07 职场文书
Python打包为exe详细教程
2021/05/18 Python
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android