如何使用 +/- 按钮更改网站字体大小

Question

如何使用 JavaScript 创建增加/减少网站上使用的字体大小的功能。基本功能应该包括两个按钮 - 一个缩小字体大小的按钮和一个放大字体大小的按钮？

Answer 1

可以监听两个按钮的click事件，使用document.body.style.fontSize根据点击按钮的id改变文档的字体大小，如下：

let buttons = document.getElementsByClassName("changeFontSize");
for(let i = 0; i < buttons.length; i++){
     buttons[i].addEventListener('click', function(e){
          if(e.target.id == "increase")
               document.body.style.fontSize = "20px";
          else if(e.target.id == "decrease")
               document.body.style.fontSize = "10px";
     })
}

<button id="increase" class="changeFontSize" type="button">Increase</button>
<button id="decrease" class="changeFontSize" type="button">Decrease</button>
<p>Hello</p>