HTML如何实现点击按钮放大缩小文字

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

先说一个最直接的做法：用原生JavaScript拿到元素后，直接改style.fontSize。够简单，也没什么框架依赖。但有个坑必须提——单位不能省。只写数字等于白写，el.style.fontSize = 24不会生效，得写成el.style.fontSize = '24px'。当然，用em或rem会更好，能继承父级的缩放关系，响应式布局下更灵活。如果只是做个临时演示，px最直观。

用 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上，如果用户双指缩放过页面，再点按钮可能发现字体变化不明显——因为整个视口被缩放了。确保中没禁掉user-scalable，否则按钮功能会被系统缩放覆盖。

更稳妥的方式是监听textEl.style.fontSize的当前值做相对计算，而不是硬编码增减量，比如：
const cur = parseFloat(getComputedStyle(textEl).fontSize);
textEl.style.fontSize = (cur * 1.2) + 'px';

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