通过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 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
两种php实现图片上传的方法
2016/01/22 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
实时获取Python的print输出流方法
2019/01/07 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
学习Python列表的基础知识汇总
2020/03/10 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
keras K.function获取某层的输出操作
2020/06/29 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
创建索引时需要注意的事项
2013/05/13 面试题
《梅花魂》教学反思
2014/04/30 职场文书
Python中request的基本使用解决乱码问题
2022/04/12 Python