如何通过点击按钮实现文字放大与缩小

直接用style.fontSize修改字体大小最简单，但必须带单位（如'24px'）；推荐用CSS类切换实现三态控制，避免zoom或transform；注意移动端viewport缩放和可访问性反馈。

用 style.fontSize 动态改字体大小最直接

不需要框架或复杂逻辑，原生 JavaScript 拿到元素后改 style.fontSize 就行。关键是单位必须写清楚——只写数字会失效，得带 px、em 或 rem。
常见错误是写成 el.style.fontSize = 24，这不会生效；正确写法是 el.style.fontSize = '24px'。

推荐用 em 或 rem，这样能继承父级缩放关系，响应式更可控。如果只是临时演示，px 最直观。

用 class 切换比内联样式更易维护

频繁操作 style 容易混乱，尤其要支持多次点击切换（放大→缩小→恢复）时。更稳妥的做法是预定义 CSS 类，用 element.classList.toggle() 控制。

.text-large { font-size: 1.5em; }.text-small { font-size: 0.8em; }

对应 JS：
btn.addEventListener('click', () => textEl.classList.toggle('text-large'));
注意：如果要实现「三态」（大/正常/小），别用 toggle，改用 add/remove 配合状态变量判断。

立即学习“前端免费学习笔记（深入）”；

避免用 zoom 或 transform: scale()

这两个属性看起来也能“放大”，但本质不是改字体大小：

• zoom 是非标准属性，Chrome 已弃用，Safari 不支持
• transform: scale() 只是视觉拉伸，文字实际尺寸没变，会影响布局、选中、可访问性（屏幕阅读器读的还是原始字号）

真要改“文字大小”，就老老实实动 font-size。这是语义正确、兼容性好、无障碍友好的做法。

移动端要注意 viewport 缩放干扰

在 iOS Safari 上，如果用户双指缩放过页面，再点按钮可能发现字体变化不明显——因为整个视口被缩放了。确保 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 中没禁掉 user-scalable，否则按钮功能会被系统缩放覆盖。

更稳妥的方式是监听 textEl.style.fontSize 的当前值做相对计算，而不是硬编码增减量，比如：

const cur = parseFloat(getComputedStyle(textEl).fontSize);<br>textEl.style.fontSize = (cur * 1.2) + 'px';

实际交互中，容易忽略的是可访问性反馈——按钮应有 aria-pressed 状态，且字号变化需足够明显（至少 ±20%），否则低视力用户可能感知不到效果。