Element.toggleAttribute()

在此页

句法
范例
Polyfill
规范
浏览器兼容性
相关话题

toggleAttribute() 方法在 元素 interface toggles a Boolean attribute (removing it if it is present and adding it if it is not present) on the given element.

句法

Element.toggleAttribute(name [, force]);

参数

名称: DOMString specifying the name of the attribute to be toggled. The attribute name is automatically converted to all lower-case when toggleAttribute() is called on an HTML element in an HTML document.
force 可选

返回值

true 若属性 名称 is eventually present, and false 否则。

异常

InvalidCharacterError: The specified attribute 名称 contains one or more characters which are not valid in attribute names.

范例

在以下范例中， toggleAttribute() is used to toggle the readonly attribute of a <input> .

HTML

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

JavaScript

var button = document.querySelector("button");
var input = document.querySelector("input");
button.addEventListener("click", function(){
  input.toggleAttribute("readonly");
});

结果

DOM methods dealing with element's attributes:

Not namespace-aware, most commonly used methods	Namespace-aware variants (DOM Level 2)	DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used)	DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used)
`setAttribute` (DOM 1)	`setAttributeNS`	`setAttributeNode`	`setAttributeNodeNS`
`getAttribute` (DOM 1)	`getAttributeNS`	`getAttributeNode`	`getAttributeNodeNS`
`hasAttribute` (DOM 2)	`hasAttributeNS`	-	-
`removeAttribute` (DOM 1)	`removeAttributeNS`	`removeAttributeNode`	-

Polyfill

if (!Element.prototype.toggleAttribute) {
  Element.prototype.toggleAttribute = function(name, force) {
    if(force !== void 0) force = !!force
    if (this.hasAttribute(name)) {
      if (force) return true;
      this.removeAttribute(name);
      return false;
    }
    if (force === false) return false;
    this.setAttribute(name, "");
    return true;
  };
}

规范

规范	状态	注释
DOM The definition of 'Element.toggleAttribute' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`toggleAttribute`	Chrome 69	Edge 18	Firefox 63	IE No	Opera 56	Safari 12	WebView Android 69	Chrome Android 69	Firefox Android 63	Opera Android 48	Safari iOS Yes	Samsung Internet Android 10.0

图例

完整支持
不支持

元数据

最后修改： Jun 9, 2019

在此页

句法

参数

返回值

异常

范例

HTML

JavaScript

结果

Polyfill

规范

浏览器兼容性

图例

相关话题