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制作xml在线编辑器实例

    js制作xml在线编辑器实例

    本文主要讲解了利用js制作xml在线编辑器的实例,文中讲解实例的图片和代码非常详细,感兴趣的小伙伴现在一起来看一看吧
    2021-08-08
  • JS基于正则截取替换特定字符之间字符串操作示例

    JS基于正则截取替换特定字符之间字符串操作示例

    这篇文章主要介绍了JS基于正则截取替换特定字符之间字符串操作方法,结合具体实例形式分析了JS基于正则实现针对特殊字符、数字等字符串类型的截取操作相关技巧,需要的朋友可以参考下
    2017-02-02
  • 基于Cesium实现拖拽3D模型的示例代码

    基于Cesium实现拖拽3D模型的示例代码

    这篇文章主要为大家详细介绍了如何利用Cesium实现在地图上添加一个3D模型,并且可以实现拖拽效果。文中的示例代码讲解详细,感兴趣的可以了解一下
    2022-06-06
  • 微信小程序如何引用外部js,外部样式,公共页面模板

    微信小程序如何引用外部js,外部样式,公共页面模板

    这篇文章主要介绍了微信小程序引用外部js,外部样式,公共页面模板,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 详解怎么检测和防止JavaScript死循环

    详解怎么检测和防止JavaScript死循环

    最近工作中遇到了一些死循环导致的页面卡死问题,经过 trouble shooting 和代码修复解决了问题,所以下面这篇文章主要给大家介绍了怎么检测和防止JavaScript死循环的相关资料,需要的朋友可以参考下
    2021-11-11
  • ES6的循环与可迭代对象示例详解

    ES6的循环与可迭代对象示例详解

    这篇文章主要给大家介绍了关于ES6的循环与可迭代对象的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • js 动态选中下拉框

    js 动态选中下拉框

    js 动态选中下拉框
    2009-11-11
  • JavaScript获取字符串实际长度(包含中英文)

    JavaScript获取字符串实际长度(包含中英文)

    这篇文章介绍了JavaScript获取字符串实际长度(包含中英文)的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 一文快速弄懂webpack动态import原理

    一文快速弄懂webpack动态import原理

    无论你开发使用的是CommonJS规范还是ES6模块规范,打包后的文件都统一使用webpack自定义的模块规范来管理、加载模块,下面这篇文章主要给大家介绍了关于webpack动态import原理的相关资料,需要的朋友可以参考下
    2022-04-04
  • Javascript获取background属性中url的值

    Javascript获取background属性中url的值

    Javascript获取CSS中属性值方法有很多,今天工作的时候遇到了一个问题是需要利用Javascript获取css中background-img属性url的值,通过查阅网站的资料找到了解决方法,现在将方法分享给大家,有需要的朋友们们可以参考借鉴,下面来一起看看吧。
    2016-10-10

最新评论