DOMTokenList.toggle()

toggle()DOMTokenList インターフェイスのメソッドで、渡された token をリストから削除し、 false を返します。 token が存在しなかった場合は、追加して true を返します。

構文

tokenList.toggle(token [, force]);

引数

token
DOMString で、存在をトグル切り替えしたいトークンを表します。
force 省略可
Boolean で、存在する場合は、片方の操作のみを行います。 false に設定すると、 token を削除するだけとなり、追加は行いません。 true に設定すると、 token を追加するだけとなり、削除は行いません。

返値

Boolean で、呼び出し後に token がリストに存在するかどうかを示します。

以下の例では、 <span> 要素に設定されたクラスのリストを DOMTokenList として受け取るのに Element.classList を使用しています。それからリスト内のトークンを置き換え、リストを <span>Node.textContent に書き込みます。

最初に HTML です。

<span class="a b">classList is 'a b'</span>

そして JavaScript です。

let span = document.querySelector("span");
let classes = span.classList;

span.addEventListener('click', function() {
  let result = classes.toggle("c");

  if (result) {
    span.textContent = `'c' added; classList is now "${classes}".`;
  } else {
    span.textContent = `'c' removed; classList is now "${classes}".`;
  }
})

出力結果は以下のようになります。

仕様書

仕様書 状態 備考
DOM
toggle() の定義
現行の標準 初回定義

ブラウザーの互換性

BCD tables only load in the browser