通过js实现网站内容文字字号增大减小

希望网站文章内容可以照顾不同人群的阅读感受，增加字号大小选择效果如何实现？今天就来说说怎样通过js实现文章全文标签字号大小选择。

刚开始想做这个功能，看了网上的一些方法，发现大部分只能指定p标签调大小，如果是是div下的<p>和<span>都要调大小就不行。但是我们大部分文章内容给肯定不只是p标签，还有span之类的。所以研究了下，通过下面的代码就可以实现了。

请看代码：

<button onclick="ztx()" style="-webkit-appearance:none;">小字</button>
<button onclick="ztz()" style="-webkit-appearance:none;">中字</button>
<button onclick="ztd()" style="-webkit-appearance:none;">大字</button>

<div id="art">

    <p>我是p标签里的文字内容</p>

    <span>我是span标签里的文字内容</span>

</div>

function ztx() {
    var pObjs = document.getElementById("art").getElementsByTagName("p");
    var sObjs = document.getElementById("art").getElementsByTagName("span");
    //循环遍历这个数组
    for (var i = 0; i < pObjs.length; i++) {
        //获取全部p标签,调整字号和行高
        pObjs[i].style.fontSize = "15px";
        pObjs[i].style.lineHeight = "1.5rem";  //调整行高，防止字体变小离的太远，
    }
    //循环遍历这个数组
    for (var i = 0; i < sObjs.length; i++) {
        //获取全部span标签,调整字号和行高
        sObjs[i].style.fontSize = "15px";
        sObjs[i].style.lineHeight = "1.5rem";
    }
}
function ztz() {
    var pObjs = document.getElementById("art").getElementsByTagName("p");
    var sObjs = document.getElementById("art").getElementsByTagName("span");
    //循环遍历这个数组
    for (var i = 0; i < pObjs.length; i++) {
        //获取全部p标签,调整字号和行高
        pObjs[i].style.fontSize = "18px";
        pObjs[i].style.lineHeight = "2rem";   //调整行高，防止字体变大后挤到一起，
    }
    //循环遍历这个数组
    for (var i = 0; i < sObjs.length; i++) {
        //获取全部span标签,调整字号和行高
        sObjs[i].style.fontSize = "18px";
        sObjs[i].style.lineHeight = "2rem";
    }
}
function ztd() {
    var pObjs = document.getElementById("art").getElementsByTagName("p");
    var sObjs = document.getElementById("art").getElementsByTagName("span");
    //循环遍历这个数组
    for (var i = 0; i < pObjs.length; i++) {
        //获取全部p标签,调整字号和行高
        pObjs[i].style.fontSize = "20px";
        pObjs[i].style.lineHeight = "2.5rem";
    }
    //循环遍历这个数组
    for (var i = 0; i < sObjs.length; i++) {
        //获取全部span标签,调整字号和行高
        sObjs[i].style.fontSize = "20px";
        sObjs[i].style.lineHeight = "2.5rem";
    }
}

通过以上代码，就可以实现全篇文字内容里不管是<p>标签还是<span>标签都能同时变动文字大小了。效果图如下：

如果你也有这个需求，就试试上面的代码吧。放大增加和缩小字体，行高也会跟着变化，不会挤到一起，也不会离的太远。很舒适。