通过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 相关文章推荐
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
div模拟选择框示例代码
Nov 03 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 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
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
js中this对象用法分析
2018/01/05 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
django页面跳转问题及注意事项
2019/07/18 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
土木工程毕业生自荐信
2013/11/12 职场文书
财务科科长岗位职责
2014/03/10 职场文书
热情服务标语
2014/10/07 职场文书
机关作风建设整改方案
2014/10/27 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
士兵突击观后感
2015/06/16 职场文书
个人售房合同协议书
2016/03/21 职场文书