最直接的方式是绑定 onclick 修改内联样式，需显式带单位（如px）；推荐用 classlist.toggle 切换含 transition 的 css 类；transform: scale() 更轻量但点击热区不变；移动端须用 touchstart/touchend 替代 click。
点击时用 style 直接改 width 和 height
最直接的方式是绑定 onclick，在事件里修改元素的内联样式。注意：必须用像素（px）或相对单位（em、rem）显式声明，百分比在无父容器约束时容易失效。
常见错误是写成 button.style.width = "200" —— 缺少单位，浏览器会忽略；或者用了 % 但父元素没设宽高，导致缩放不生效。
-
button.style.width = "120px"和button.style.height = "48px"是安全写法 - 若想恢复原尺寸，不能写
""（清空），而应设回原始值，或用button.style.removeProperty("width") - 避免在循环或高频点击中反复赋值，可能触发重排（reflow），影响性能
用 classList.toggle() 切换 CSS 类更可靠
比起硬编码尺寸，用 CSS 类管理状态更易维护、支持过渡动画、且不污染 JS 逻辑。关键是确保类中定义了 width 和 height，并加 transition 实现平滑变化。
典型坑：忘了给按钮设初始 box-sizing: border-box，导致 padding 变化时实际尺寸偏离预期；或者过渡属性没写全，比如只写了 transition: width，但没包含 height，结果高度突变。
- CSS 中定义：
.btn-expanded { width: 160px; height: 56px; transition: width 0.2s, height 0.2s; } - JS 中调用：
button.classList.toggle("btn-expanded") - 如果按钮有
padding或border，确认box-sizing是border-box，否则尺寸计算会出错
用 transform: scale() 做视觉缩放而非真实尺寸变更
如果只是想“看起来变大”，而不是改变布局流（比如不想挤开旁边元素），transform: scale() 是更轻量的选择。它不触发重排，只影响渲染层，性能更好。
但要注意：缩放后点击热区不会自动扩大，除非额外设置 transform-origin 和调整 padding，否则用户可能点不准。
-
button.style.transform = "scale(1.3)"比改width/height更快 - 配合
transform-origin: center避免偏移 - 若需保持点击区域同步放大，得同时调大
padding或用pointer-events: none+ 伪元素覆盖，复杂度明显上升
移动端点击反馈和 active 伪类别依赖
在 iOS Safari 或部分安卓浏览器上，单纯靠 :active 改大小几乎无效——因为触摸结束太快，样式来不及响应。必须用 JS 绑定 touchstart / touchend 才能稳定控制。
另外，click 事件在移动端有约 300ms 延迟，用户会觉得卡顿。用 touchstart 替代可消除延迟，但得手动处理重复触发（比如快速连点）。
- 推荐监听
touchstart触发放大，touchend或touchcancel恢复 - 加
event.preventDefault()在touchstart里防止默认行为干扰 - 避免同时绑定
click和touchstart，否则可能触发两次
transform 和 layout 尺寸混用时，稍不注意就会出现视觉错位或点击失灵。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
