Element: toggleAttribute() 方法

Baseline 已广泛支持

此特性已成熟稳定,适用于多种设备和浏览器版本。自 2018 年 10 月起,它已在各浏览器中可用。

Element 接口的 toggleAttribute() 方法用于切换给定元素的布尔属性(如果属性存在则移除它,如果属性不存在则添加它)。

语法

js
toggleAttribute(name)
toggleAttribute(name, force)

参数

name

一个指定要切换的属性名称的字符串。在 HTML 文档中的 HTML 元素上调用 toggleAttribute() 时,属性名会自动转换为小写。

force 可选

一个布尔值,具有以下效果:

  • 如果根本没有指定,toggleAttribute 方法会“切换”名为 name 的属性——如果属性存在则移除它,否则如果属性不存在则添加它。
  • 如果为 truetoggleAttribute 方法将添加一个名为 name 的属性。
  • 如果为 falsetoggleAttribute 方法将移除名为 name 的属性。

返回值

如果属性 name 最终存在,则返回 true,否则返回 false

异常

InvalidCharacterError DOMException

指定的属性 name 包含一个或多个在属性名中无效的字符。

示例

在下面的示例中,toggleAttribute() 用于切换 <input> 元素的 disabled 属性。

HTML

html
<input value="text" /> <button>toggleAttribute("disabled")</button>

JavaScript

js
const button = document.querySelector("button");
const input = document.querySelector("input");

button.addEventListener("click", () => {
  input.toggleAttribute("disabled");
});

结果

规范

规范
DOM
# ref-for-dom-element-toggleattribute①

浏览器兼容性

另见