toggleattribute 的核心作用是“有则删、无则加”，仅操作 html attribute 存在性，不判值真假，专用于标准布尔属性（如 disabled、hidden、open 等）及 data- 自定义属性；禁用 class、src、aria-hidden 等非布尔属性，ie 需降级处理。
toggleAttribute 的核心作用就是「有则删、无则加」，不看值、不判真假、不改 DOM 属性（property），只动 HTML attribute 本身。它不是万能开关，只对布尔型 HTML 属性真正安全有效。
哪些属性能用 toggleAttribute 安全切换
必须是 HTML 标准明确定义的布尔属性（boolean content attributes）——即“存在即 true，不存在即 false”，值的内容被浏览器完全忽略：
-
contenteditable、disabled、hidden、readonly、required -
checked（仅限<input type="checkbox">）、selected（仅限<option></option>） -
open（<details></details>）、controls、loop、muted（<video></video>等） -
data-开头的自定义属性（如data-expanded）——只要你只靠“存在与否”做逻辑分支，就可用
⚠️ 这些不能用：class、src、value、style、id；aria-hidden 虽常当开关用，但它是枚举属性，不是布尔属性，应改用 setAttribute('aria-hidden', 'true') 或 removeAttribute('aria-hidden')。
为什么 toggleAttribute 比手动 hasAttribute + remove/setAttribute 更可靠
手动判断容易掉进值语义陷阱。比如你写：
if (el.hasAttribute('disabled')) {
el.removeAttribute('disabled');
} else {
el.setAttribute('disabled', 'false'); // ❌ 错！
}
这会让 disabled="false" 留在 DOM 里，而浏览器仍视其为启用状态（因为只要属性存在，就等价于 true）。toggleAttribute 绕过所有值判断，只管存在性：
-
el.toggleAttribute('disabled')：当前有就删，没有就加，结果永远符合规范 - 传
false强制移除（el.toggleAttribute('disabled', false)）和传true强制添加（el.toggleAttribute('disabled', true)）是可选控制，不传才真正“切换” - 对
<details></details>的open尤其关键：直接赋值el.open = false不生效，必须用toggleAttribute('open')或removeAttribute('open')
常见误用与兼容性坑点
实际写代码时最容易忽略这几条：
- IE 完全不支持
toggleAttribute，需 fallback：el.hasAttribute('foo') ? el.removeAttribute('foo') : el.setAttribute('foo', '') -
spellcheck表面像布尔属性，实为枚举属性（可取"true"/"false"），用toggleAttribute('spellcheck')会变成spellcheck=""，行为不可控 -
draggable是布尔属性，但旧版 Safari 对toggleAttribute支持不完整，建议加检测或降级 - 别和
classList.toggle混用：前者删/加 HTML attribute，后者改 class 字符串；el.classList.toggle('is-disabled')不会影响disabled属性，编辑器照样能点
最常被漏掉的是：自定义 data- 属性虽然能用 toggleAttribute，但如果你后续依赖 dataset.foo 读值，要注意它只映射非空字符串值——data-foo="" 会被 dataset.foo 当作 undefined，而 hasAttribute('data-foo') 仍返回 true。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
