button元素支持所有HTML全局属性，最常误用或忽略的有id、class、title、lang、dir、hidden、data-*；其中disabled虽为表单专属但语义上广泛适用，需注意hidden与disabled本质不同：前者移除渲染，后者保留焦点与语义。
button 元素能用哪些全局属性？
所有 HTML 元素都可使用的全局属性，button 也完全支持。最常被误用或忽略的有：id、class、title、lang、dir、hidden、disabled（注意：disabled 是表单控件专属属性，但属于“全局可用”的语义范畴）、data-* 自定义属性。
这些属性不是装饰，而是直接影响行为与可访问性：
-
id必须唯一，用于 JSgetElementById或label[for]关联；重复 ID 会导致document.getElementById返回不可预期元素 -
title在按钮上显示 tooltip，但别依赖它传递关键操作说明——移动设备不触发 hover，且屏幕阅读器不一定朗读 -
lang和dir影响文本渲染与语音合成，比如阿拉伯语按钮需显式写lang="ar" dir="rtl"，否则数字和标点顺序错乱 -
hidden会让按钮从渲染树移除（不可见、不可聚焦、不占空间），但它 ≠display: none的 CSS 效果；若只是临时隐藏又想保留焦点流，该用aria-hidden="true"+tabIndex="-1"
为什么不能用 hidden 替代 disabled？
hidden 和 disabled 解决的是两类问题：hidden 表示“不该存在”，disabled 表示“存在但当前不可用”。对 button 来说，混用会直接破坏交互逻辑。
- 用户按 Tab 键时，
hidden按钮跳过，disabled按钮仍保留在焦点顺序中（但无法激活） -
disabled按钮自动禁用click、keydown（空格/回车）事件，且不会被表单提交；hidden下按钮根本不在 DOM 渲染树里，JS 绑定的事件监听器也收不到任何触发 - 用
hidden控制加载态按钮（如“提交中…”）是错的：用户可能已 tab 进去再回车，结果无响应；正确做法是保持元素在位 +disabled+ 视觉反馈（如加is-loadingclass） - 部分旧版 Safari 对
hidden的支持不稳定，建议搭配aria-hidden="true"和tabIndex="-1"双保险
data-* 属性怎么安全传参给 JS？
data-* 是唯一推荐的自定义数据载体，但必须遵守命名规则和读取方式，否则 JS 拿不到值。
立即学习“前端免费学习笔记（深入）”；
- HTML 中写
data-user-id="123"，JS 中必须用el.dataset.userId（驼峰化，去掉data-前缀），不能写el.dataset["user-id"]—— 后者在某些浏览器返回undefined - 避免在
data-*里塞复杂结构（如 JSON 字符串），解析易出错；如需传对象，优先用JSON.stringify序列化后存，再用JSON.parse读，且要加try/catch - 敏感信息（如 token、用户邮箱）绝不能放
data-*，它会暴露在 DOM 中，任何脚本都能读取；这类数据应走服务端接口或加密上下文 - 大量动态按钮（如列表项操作）建议用事件委托，而非每个按钮都绑定独立 handler + 写一堆
data-*；统一监听父容器，用e.target.dataset提取上下文
lang/dir 设置错误会导致什么具体问题？
按钮内含多语言文本或双向字符（如阿拉伯数字+中文）时，lang 和 dir 错误会引发肉眼可见的排版崩坏与语音错误。
- 中文按钮里嵌英文单位（如“上传 5MB”），若没设
lang="zh-CN"，部分屏幕阅读器可能用英语发音读 “5MB”，造成歧义 - 希伯来语按钮文字显示为反向（如 “שלח” 显示成 “הלש”），大概率是漏了
dir="rtl"；仅靠 CSSdirection: rtl不够，必须配合 HTML 层级声明 - Chrome 120+ 对未声明
lang的按钮，在启用语音控制（Voice Control）时可能跳过识别，导致“点击上传”指令失效 - 不要在
button上滥用dir="auto"：它依赖文本首字符判断方向，而图标 + 文字组合（如<svg>⋯</svg> 上传）会让首字符变成 SVG 的<，判定失败
实际项目里最容易被忽略的，是把 hidden 当作“视觉隐藏 + 禁用”两用方案，以及在多语言按钮中默认依赖浏览器猜测 lang。这两处一旦出错，问题往往只在特定设备或辅助技术下暴露，复现成本高，排查极难。
