• 技术文章 >web前端 >js教程

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

    高洛峰高洛峰2016-12-05 14:51:43原创1386
    在做公司的官网的时候,新闻内页会有一个让浏览者自己调整文字大小的功能,因此在这个空闲时间,把这个功能整理下来:

    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值,然后自定义按钮的样式。

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:JavaScript
    上一篇:JavaScript实现的CRC32函数示例 下一篇:Asp.Net之JS生成分页条的方法
    Web大前端开发直播班

    相关文章推荐

    • JavaScript经典基础详解之函数• 聊聊V8的内存管理与垃圾回收算法• 你能搞懂JS的this指向问题吗?看看这篇文章• 值得了解的几个实用JavaScript优化小技巧• 浅析Angular中怎么用 Api 代理

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网