--- title: DOMTokenList.toggle() slug: Web/API/DOMTokenList/toggle tags: - API - DOM - DOMTokenList - Method - Reference - toggle translation_of: Web/API/DOMTokenList/toggle ---

{{APIRef("DOM")}}

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

構文

tokenList.toggle(token [, force]);

引数

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

返値

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

以下の例では、 {{htmlelement("span")}} 要素に設定されたクラスのリストを DOMTokenList として受け取るのに {{domxref("Element.classList")}} を使用しています。それからリスト内のトークンを置き換え、リストを <span> の {{domxref("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}".`;
  }
})

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

{{ EmbedLiveSample('Examples', '100%', 60) }}

仕様書

仕様書 状態 備考
{{SpecName('DOM WHATWG','#dom-domtokenlist-toggle','toggle()')}} {{Spec2('DOM WHATWG')}} 初回定義

ブラウザーの互換性

{{Compat("api.DOMTokenList.toggle")}}