toggleattribute()的核心作用是切换布尔属性的存在与否，适用于disabled、open等布尔型html属性及自定义data-*属性，不适用于class、src、aria-hidden等带值属性。
toggleAttribute() 的核心作用就是切换布尔属性的“存在”与“不存在”——不是改值，而是删或加整个属性。它不关心你传的是 disabled、open 还是自定义的 data-expanded，只要是个字符串，它就按“有则删、无则加”的逻辑执行。
哪些属性适合用 toggleAttribute() 切换
只适用于**布尔型 HTML 属性（boolean content attributes）**，即规范中定义为“只要存在就代表 true，不存在即 false”的那些：
-
disabled、readonly、checked、selected（<input>、<option></option>等） -
open（<details></details>）、controls、loop、muted（<video></video>、<audio></audio>） -
hidden（注意：不是 CSSdisplay: none，而是原生语义隐藏） - 自定义属性如
data-active、data-expanded—— 只要你不依赖它的值，只用它做状态标记，就完全适用
⚠️ 不适合：class、id、style、src、value 这类带实际值的属性；也不适合 ARIA 属性如 aria-hidden="true" —— 它们虽常被当开关用，但本质是枚举/字符串属性，应改用 setAttribute('aria-hidden', 'true') 或 removeAttribute('aria-hidden') 配合手动控制。
toggleAttribute() 和直接操作 DOM 属性（如 el.disabled）的区别
表面看效果相似，但底层机制和适用范围不同：
-
el.toggleAttribute('disabled')操作的是 HTML attribute（即你在源码里写的那个disabled），会同步更新 DOM 树中的attributes列表，也会影响序列化（如el.outerHTML） -
el.disabled = true操作的是 IDL attribute（DOM property），它会同时修改内部状态并自动同步到对应 content attribute（对内置布尔属性而言），但这个反射行为仅限于浏览器内置支持的属性名 - 对
<div data-foo> 这类自定义属性，<code>el.dataset.foo是只读映射，不能靠赋值触发添加/删除；必须用toggleAttribute('data-foo')或setAttribute/removeAttribute - 对
<details></details>的open：直接赋值el.open = false无效（它只是初始反射值），必须用toggleAttribute('open')或removeAttribute('open') -
toggleAttribute()第二个参数force是可选布尔值：设为true强制添加（即使已存在），false强制移除（即使不存在）。不传时才真正“切换”。很多人写成el.toggleAttribute('open', el.hasAttribute('open'))—— 完全多余，反而绕过切换逻辑 - 大小写不敏感但统一转小写：传
'ReadOnly'或'READONLY'，最终都操作readonly属性（HTML 规范要求 content attribute 名标准化为小写） - IE 完全不支持，Edge 18 及更早也不支持；现代 Chrome/Firefox/Safari/Edge（Chromium 内核）均支持（2018 年进规范，2026 年已属稳定 API）
- 不要混用：避免一边用
toggleAttribute('disabled')，一边又用el.removeAttribute('disabled')或el.setAttribute('disabled', '')，容易因时机错乱导致状态不一致
常见误用与兼容性注意点
容易忽略但直接影响功能是否生效的细节：
配合 CSS 做状态驱动样式的关键写法
用 toggleAttribute() 切换属性后，CSS 要能响应变化，必须用属性选择器匹配“存在性”，而不是值：
button[data-loading] {
opacity: 0.6;
pointer-events: none;
}
/* ✅ 正确：匹配有 data-loading 属性的 button */
/* ❌ 错误：[data-loading="true"] 依赖具体值，而 toggleAttribute 不设值 */
对于原生布尔属性，同样适用：
input[readonly] {
background-color: #f5f5f5;
}
/* 注意：[disabled] 有效，但 [disabled="true"] 在部分旧浏览器中可能不匹配 */
动画过渡需额外处理：若用 height 或 opacity 配合 data-expanded，记得在 CSS 中显式声明 transition，且初始状态（如 height: 0）和展开状态（如 height: auto）之间无法平滑过渡 —— 此时应改用 max-height 或 transform: scaleY() 替代。
