真正可靠的禁用必须用原生disabled属性，因其保障键盘导航、屏幕阅读器语义及事件拦截；实操需html直接声明、js用.disabled赋值、css用:disabled伪类样式，并在ios中配合aria-disabled增强兼容性。
为什么
禁用按钮时，opacity: 0.5 + pointer-events: none 看似有效，但实际会破坏语义和交互链路：键盘用户仍能 Tab 进入、Enter 触发点击事件，屏幕阅读器也读不出“已禁用”。真正可靠的禁用必须用原生 disabled 属性。
实操要点：
- HTML 中直接写
<button disabled>提交</button>，别用 class 或 style 模拟 - JS 控制时用
btn.disabled = true，而不是btn.setAttribute('disabled', '')（后者不触发 DOM 属性变更监听） - CSS 中为
button:disabled单独写样式：加cursor: not-allowed、降opacity、移除所有:hover动画 - 移动端需注意：iOS Safari 对
disabled按钮的焦点行为有差异，建议配合aria-disabled="true"双保险
如何用CSS变量实现按钮多态平滑切换
纯伪类（:hover/:active）只能响应简单交互，而真实业务中常需“加载中”“成功”“失败”等多状态。靠 JS 切换 class 虽可行，但动画耦合重、维护难；用 CSS 自定义属性 + transition 更轻量可控。
关键做法：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 在按钮上设内联变量：
style="--btn-state: idle; --btn-bg: #4CAF50;" - CSS 中用
background-color: var(--btn-bg)，并声明transition: background-color 0.2s, transform 0.1s - JS 改变状态时只改变量：
btn.style.setProperty('--btn-state', 'loading')，再在 CSS 里写button[style*="loading"] { --btn-bg: #ff9800; transform: scale(0.98); } - 避免在 :hover 中覆盖变量值——否则鼠标悬停会打断当前业务状态
type="submit" 在 form 里点一下就刷新？这是默认行为
没显式声明 type 的 <button></button> 在 <form></form> 内部，默认是 type="submit"。JS 还没加载完，用户回车或点击，表单立刻提交，你的 click 监听器根本没机会执行。
必须明确指定类型：
- 纯 UI 交互（弹窗、切换状态）→ 用
type="button" - 要提交表单 → 用
type="submit"，且确保它在<form></form>标签内 - 重置表单 → 用
type="reset" - 千万别依赖 JS 动态设置
type：DOM 渲染阶段行为已按默认值确定
移动端触摸反馈为何总失效
:active 伪类在触摸设备上表现不稳定——手指按下去瞬间可能没反应，松开才闪一下。这不是 bug，而是规范限制：:active 在 pointer 设备上仅在“激活态”期间生效，而触摸屏的激活窗口极短。
可靠方案：
- 对触摸设备，用
@media (hover: none) and (pointer: coarse)降级处理，把:active效果挪到:focus-visible或 JS 的touchstart/touchend上 - 不要只靠颜色变化做按下反馈——色盲用户感知不到，改用
transform: scale(0.98)或轻微box-shadow扩展 - 确保热区足够大：iOS 建议最小 44×44px，Android 48×48dp，
padding比强行放大文字更安全 -
outline在移动端可隐藏，但focus状态必须保留视觉反馈，比如加一圈高对比边框
data-state 属性，CSS 和 JS 都只认它。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
