通过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的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
javascript使用call调用微信API
Dec 15 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
使用vue制作滑动标签
Sep 21 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 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 CURL获取邮箱地址的详解
2013/06/03 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
Python中用Decorator来简化元编程的教程
2015/04/13 Python
python线程中同步锁详解
2018/04/27 Python
Selenium定位元素操作示例
2018/08/10 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
股东合作协议书
2014/04/14 职场文书
大学生见习报告总结
2014/11/04 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书