Element: toggleAttribute() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年10月.
toggleAttribute() は Element インターフェイスのメソッドで、この要素に対して論理属性をトグル切り替えします（存在する場合は取り除き、存在しない場合は追加します）。
構文
js
toggleAttribute(name) toggleAttribute(name, force) 引数
name-
文字列で、トグル切り替えしたい属性の名前を指定します。HTML 文書内の HTML 要素に対して
toggleAttribute()が呼び出されるとばれると、属性名は自動的に全て小文字に変換されます。 force省略可-
論理値で、以下の効果があります。
- 指定されなかった場合、
toggleAttributeメソッドはnameという名前の属性を「トグル切り替え」します。 — 存在すれば取り除き、存在しなければ追加します。 - true であった場合、
toggleAttributeメソッドは、nameという名前の属性を追加します。 - false であった場合、
toggleAttributeメソッドはnameという名前の属性を取り除きます。
- 指定されなかった場合、
返値
name という属性が存在する状態になれば true、そうでなければ false となります。
例外
InvalidCharacterErrorDOMException-
指定された属性
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"); }); 結果
仕様書
| Specification |
|---|
| DOM # ref-for-dom-element-toggleattribute① |