JavaScript 控制字体大小设置的方法


Posted in Javascript onNovember 23, 2016

在做公司的官网的时候,新闻内页会有一个让浏览者自己调整文字大小的功能,因此在这个空闲时间,把这个功能整理下来:

function setFontSize (id,content,params){
      var oTarget = document.getElementById(id),
        content = document.getElementById(content),
        size = params.size || 14,
        maxSize = params.maxSize || 20,
        step = params.step || 2;
        oBtn = '<input type="button" value="+"/><input type="button" value="-" />';
        oBtn1 = null,
        oBtn2 = null;

        oTarget.innerHTML = oBtn;
        oBtn1 = oTarget.childNodes[0];
        oBtn2 = oTarget.childNodes[1];

        oBtn1.onclick=function(){
          if(size+step <= maxSize){
            size+=step;
          }else{
            size = maxSize;
            this.className+=' disabled';
            this.disabled = true;
          }
          oBtn2.className.replace('disabled','');
          oBtn2.disabled = false;
          content.style.fontSize = size +'px';
        }
        oBtn2.onclick=function(){
          if(size-step >= 12){ 
            size-=step;
          }else{
            size = 12;
            this.className+=' disabled'
            this.disabled = true;
          }
          oBtn1.className.replace('disabled','');
          oBtn1.disabled = false;
          content.style.fontSize = size +'px';
      }
  }

调用方式:

setFontSize(id,contentid,{size:,maxSize,step:});
/*
 * id :用于存放增加或减小两个按钮的父级盒子的id。
 * contentid: 存放内容的id。
 * {} 一个对象,用于提供设置的参数。
     |— szie : 字体起始(默认)大小。
     |— maxSize : 最大字体。
     |— step : 增长的步长值。
*/

提示:可以通过font-size:0的方式来隐藏Input元素的value值,然后自定义按钮的样式。

以上这篇JavaScript 控制字体大小设置的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
javascript常用函数(1)
Nov 04 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 #Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 #Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 #Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 #Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 #Javascript
domReady的实现案例
Nov 23 #Javascript
BootStrap按钮标签及基本样式
Nov 23 #Javascript
You might like
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
js的闭包的一个示例说明
2008/11/18 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
python使用Tesseract库识别验证
2018/03/21 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
护士检查书
2014/01/17 职场文书
电视节目策划方案
2014/05/16 职场文书
财会专业大学生求职信
2014/09/26 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
运动会广播稿50字
2015/08/19 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
导游词之日月潭
2019/11/05 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫