通过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 ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 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
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
Python列表推导式的使用方法
2013/11/21 Python
详解python读取和输出到txt
2019/03/29 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
保护环境倡议书300字
2014/05/19 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
高中家长意见怎么写
2015/06/03 职场文书
公司员工培训管理制度
2015/08/04 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
redis数据结构之压缩列表
2022/03/21 Redis
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技