刚开始想做这个功能，看了网上的一些方法，发现大部分只能指定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>标签都能同时变动文字大小了。效果图如下：
如果你也有这个需求，就试试上面的代码吧。放大增加和缩小字体，行高也会跟着变化，不会挤到一起，也不会离的太远。很舒适。
