--- 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
force
{{optional_inline}}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")}}