直接操作style.fontSize是最轻量可控的方式，需注意单位、驼峰命名、CSS类切换更健壮，避免a标签跳转、适配行高与字间距，并考虑移动端限制。
点击按钮触发文字大小变化，本质是操作 style.fontSize
直接改元素的 style.fontSize 是最轻量、最可控的方式。DOM 元素（比如 <div id="content">）本身有 style 对象，写入字符串如 "18px" 或 "1.2em" 就能即时生效。别用 setAttribute('style', ...) 覆盖整个 style 字符串——容易误删已有样式。
常见错误：写成 element.style.fontSize = 18（漏单位），浏览器会忽略；或写成 element.style.font-size = "18px"（用了短横线，JS 中必须驼峰写法 fontSize）。
- 单位推荐用
px（精准）或em（相对父级，适合响应式） - 避免用
%或rem动态计算时没考虑基准，容易跳变 - 如果目标区域含多个子元素，需递归设置或统一用 CSS 类控制更稳妥
用 classList.toggle() 切换预设字号类更健壮
比起硬编码数值，提前在 CSS 里定义好几档字号类（如 .size-small、.size-large），JS 只负责切换类名，逻辑清晰、易维护、支持过渡动画。
示例 CSS：
.size-small { font-size: 14px; }
.size-normal { font-size: 16px; }
.size-large { font-size: 20px; }对应 JS：document.getElementById('content').classList.toggle('size-large')。
- 用
toggle()可来回切换；若需单向增大/减小，改用add()/remove() - 确保目标元素初始有默认类（如
class="size-normal"），否则第一次切换可能无效果 - 注意浏览器对
font-size的继承规则——如果父容器没设字体大小，子元素用em可能行为意外
按钮绑定事件时，别漏掉 event.preventDefault()（尤其用 <a> 标签当按钮）
很多人随手用 <a href="#">放大</a> 当按钮，点一下页面就跳到顶部——因为 # 触发了默认跳转。必须加 event.preventDefault() 阻止。
立即学习“前端免费学习笔记（深入）”；
正确写法：
btn.addEventListener('click', function(e) {
e.preventDefault();
content.style.fontSize = '20px';
});或者干脆用语义正确的 <button> 标签，省去这一步。
-
<button>默认不跳转、可聚焦、无障碍友好，比<a>更合适做操作控件 - 如果用
onclick="handleSize()"内联写法，函数内部仍要写e.preventDefault()（需把事件传进来） - 移动端点透问题：部分安卓浏览器对
<a>点击响应慢，<button>更可靠
字号变更后，记得检查行高、字间距是否同步适配
只改 font-size 常导致文字挤在一起或行距崩塌——尤其是中文段落。CSS 中 line-height 若写死像素值（如 line-height: 20px），字号变大后行高不会自动放大。
- 推荐用无单位数值（如
line-height: 1.5），它会随font-size等比缩放 - 如果用了
letter-spacing，也建议用em或rem单位，避免字号变大后字间距过窄 - 测试时真机打开，iOS Safari 对
font-size有最小值限制（通常不低于 16px），强行设12px可能无效
font-size 不难，让所有相关表现都稳住才见功夫。 
