通过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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 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
3
2006/10/09 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
利用Python如何生成hash值示例详解
2017/12/20 Python
Python for循环中的陷阱详解
2018/07/13 Python
Python tkinter三种布局实例详解
2020/01/06 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
Python如何读取、写入CSV数据
2020/07/28 Python
经典c++面试题六
2012/01/18 面试题
后勤岗位职责
2013/11/26 职场文书
名人演讲稿范文
2013/12/28 职场文书
户外宣传策划方案
2014/05/25 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
贷款担保书
2015/01/20 职场文书
单位车辆管理制度
2015/08/05 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js