如何实现点击按钮调整div内所有子元素的字体大小并生效

你存储子元素的content节点集合和font_size数组的索引是完全一一对应的，只需要在每次修改字号数组后，将对应数值赋值给对应元素的行内样式即可，另外需要阻止按钮的默认跳转行为，避免点击后页面刷新。

修正后的完整JS代码 #

const content = document.querySelectorAll('.content *');
let font_size = [];
for (let i = 0; i < content.length; i++) {
  const style = getComputedStyle(content[i]);
  font_size[i] = parseInt(style.fontSize);
}

const btns = document.querySelectorAll('.btn');
btns.forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    const styles = e.currentTarget.classList;
    if (styles.contains('decrease')) {
      for (let i = 0; i < font_size.length; i++) {
        // 可选：加最小字号限制，避免字号过小无法阅读
        if(font_size[i] > 6) {
          font_size[i] -= 2;
        }
      }
    } else {
      for (let i = 0; i < font_size.length; i++) {
        font_size[i] += 2;
      }
    }
    // 将新字号赋值给对应元素
    for (let i = 0; i < content.length; i++) {
      content[i].style.fontSize = `${font_size[i]}px`;
    }
  });
});

核心修改说明 #

• 新增e.preventDefault()阻止按钮默认跳转行为，避免页面刷新重置样式
• 修改完字号数组后新增一轮遍历，将数组中存储的新字号拼接px单位后，赋值给对应元素的style.fontSize属性触发样式更新
• 可选增加最小字号限制，避免字号缩小到无法正常阅读的大小

内容的提问来源于stack exchange，提问作者Bikal Koju