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 July 2015.

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");
});

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser