通过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 相关文章推荐
javascript 动态参数判空操作
Dec 22 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
JavaScript中对象介绍
Dec 31 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
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
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
PHP类的特性实例分析
2016/09/28 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python3实现从文件中读取指定行的方法
2015/05/22 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Python贪心算法实例小结
2018/04/22 Python
python网络应用开发知识点浅析
2019/05/28 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
python中数字是否为可变类型
2020/07/08 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
写演讲稿要注意的六件事
2014/01/14 职场文书
安全检查管理制度
2014/02/02 职场文书
区级文明单位申报材料
2014/05/15 职场文书
青年志愿者活动方案
2014/08/17 职场文书
小学美术教学反思
2016/02/17 职场文书
合同补充协议书
2016/03/24 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL