Element: toggleAttribute() メソッド

toggleAttribute()Element インターフェイスのメソッドで、この要素に対して論理属性をトグル切り替えします(存在する場合は取り除き、存在しない場合は追加します)。

構文

js
toggleAttribute(name)
toggleAttribute(name, force)

引数

name

文字列で、トグル切り替えしたい属性の名前を指定します。HTML 文書内の HTML 要素に対して toggleAttribute() が呼び出されるとばれると、属性名は自動的に全て小文字に変換されます。

force 省略可

論理値で、以下の効果があります。

  • 指定されなかった場合、 toggleAttribute メソッドは name という名前の属性を「トグル切り替え」します。 — 存在すれば取り除き、存在しなければ追加します。
  • true であった場合、 toggleAttribute メソッドは、 name という名前の属性を追加します。
  • false であった場合、 toggleAttribute メソッドは name という名前の属性を取り除きます。

返値

name という属性が存在する状態になれば true、そうでなければ false となります。

例外

InvalidCharacterError DOMException

指定された属性 name に、属性名として無効な文字が 1 文字以上含まれています。

次の例では、 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 メソッドは要素の属性を取り扱います。

名前空間に無関係、
最も一般的に使用されるメソッド
名前空間に限定される変数
(DOM Level 2)
Attr ノードを直接扱う DOM レベル 1 のメソッド
(ほとんど使用されない)
Attr ノードを直接扱う DOM レベル 2 名前空間に限定されるメソッド
(ほとんど使用されない)
setAttribute (DOM 1) setAttributeNS setAttributeNode setAttributeNodeNS
getAttribute (DOM 1) getAttributeNS getAttributeNode getAttributeNodeNS
hasAttribute (DOM 2) hasAttributeNS - -
removeAttribute (DOM 1) removeAttributeNS removeAttributeNode -

仕様書

Specification
DOM Standard
# ref-for-dom-element-toggleattribute①

ブラウザーの互換性

BCD tables only load in the browser