Home > Web Front-end > JS Tutorial > body text

JavaScript method to control font size setting

高洛峰
Release: 2016-12-05 14:51:43
Original
2360 people have browsed it

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;;
      }
  }
Copy after login

Call method:

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

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


Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template