Home  >  Article  >  Web Front-end  >  JavaScript method to control font size setting

JavaScript method to control font size setting

高洛峰
高洛峰Original
2016-12-05 14:51:432305browse

When making the company's official website, the news page will have a function that allows viewers to adjust the text size themselves, so in this free time, I sorted out this function:

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 = &#39;<input type="button" value="+"/><input type="button" value="-" />&#39;;
        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+=&#39; disabled&#39;;
            this.disabled = true;
          }
          oBtn2.className.replace(&#39;disabled&#39;,&#39;&#39;);
          oBtn2.disabled = false;
          content.style.fontSize = size +&#39;px&#39;;
        }
        oBtn2.onclick=function(){
          if(size-step >= 12){
            size-=step;
          }else{
            size = 12;
            this.className+=&#39; disabled&#39;
            this.disabled = true;
          }
          oBtn1.className.replace(&#39;disabled&#39;,&#39;&#39;);
          oBtn1.disabled = false;
          content.style.fontSize = size +&#39;px&#39;;
      }
  }

Call method:

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

Tips: You can hide the value of the Input element through font-size:0, and then customize the button style.


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn