通过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 框架小结 个人工作经验
Jun 13 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
使用typescript快速开发一个cli的实现示例
Dec 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
德劲1107的电路分析与打磨
2021/03/02 无线电
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
header跳转和include包含问题详解
2012/09/08 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
python转换摩斯密码示例
2014/02/16 Python
深入理解Python 代码优化详解
2014/10/27 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
python之super的使用小结
2018/08/13 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
在python shell中运行python文件的实现
2019/12/21 Python
益达广告词
2014/03/14 职场文书
企业业务员岗位职责
2014/03/14 职场文书
詹天佑教学反思
2014/04/30 职场文书
中国梦读书活动总结
2014/07/10 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
公司保密管理制度
2015/08/04 职场文书