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

 更新时间:2016年11月23日 10:37:50   投稿:jingxian  
下面小编就为大家带来一篇JavaScript 控制字体大小设置的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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 控制字体大小设置的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 原生JS实现获取及修改CSS样式的方法

    原生JS实现获取及修改CSS样式的方法

    这篇文章主要介绍了原生JS实现获取及修改CSS样式的方法,结合实例形式简单分析了JavaScript针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-09-09
  • extjs中form与grid交互数据(record)的方法

    extjs中form与grid交互数据(record)的方法

    这篇文章介绍了extjs中form与grid交互数据(record)的方法,有需要的朋友可以参考一下
    2013-08-08
  • 微信小程序实现简单文字跑马灯

    微信小程序实现简单文字跑马灯

    这篇文章主要介绍了微信小程序实现简单文字跑马灯,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 微信小程序 自定义消息提示框

    微信小程序 自定义消息提示框

    这篇文章主要介绍了微信小程序 自定义消息提示框的相关资料,wx.showToast(OBJECT)接口调用,实现改功能,需要的朋友可以参考下
    2017-08-08
  • 浅谈Emergence.js 检测元素可见性的 js 插件

    浅谈Emergence.js 检测元素可见性的 js 插件

    这篇文章主要介绍了浅谈Emergence.js 检测元素可见性的 js 插件,详细的介绍了Emergence.js安装和使用方法,具有一定的参加性,有兴趣的可以了解一下
    2017-11-11
  • 在JavaScript中使用JSON数据

    在JavaScript中使用JSON数据

    JSON 是 JavaScript 原生格式,这意味着 在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包,接下来由脚本之家小编给大家介绍在JavaScript中使用JSON数据的方法,感兴趣的朋友一起学习吧
    2016-02-02
  • JS实现前端动态分页码代码实例

    JS实现前端动态分页码代码实例

    这篇文章主要介绍了JS实现前端动态分页码代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • JavaScript 拖拽实例代码

    JavaScript 拖拽实例代码

    这篇文章主要介绍了JavaScript 拖拽实例代码的相关资料,需要的朋友可以参考下
    2016-09-09
  • 小程序点赞收藏功能的实现代码示例

    小程序点赞收藏功能的实现代码示例

    这篇文章主要介绍了小程序点赞收藏功能的实现代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • js 触发select onchange事件代码

    js 触发select onchange事件代码

    select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,本文为大家介绍下使用js触发select onchange事件
    2014-03-03

最新评论