通过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当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
网页打开自动最大化的js代码
2012/08/22 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
js选项卡的制作方法
2017/01/23 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
python中字符串前面加r的作用
2015/06/04 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
python绘制热力图heatmap
2020/03/23 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
Python 的AES加密与解密实现
2019/07/09 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
安全教育第一课观后感
2015/06/17 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
python实现进度条的多种实现
2021/04/29 Python
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
Python制作春联的示例代码
2022/01/22 Python
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android