通过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 相关文章推荐
JS 强制设为首页的代码
Jan 31 Javascript
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
vue路由跳转传参数的方法
May 06 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 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
用PHP和ACCESS写聊天室(六)
2006/10/09 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
yii分页组件用法实例分析
2015/12/28 PHP
php-app开发接口加密详解
2018/04/18 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
学前教育毕业生自荐信
2013/10/29 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL