DOMTokenList.toggle()
toggle()
は DOMTokenList
インターフェイスのメソッドで、渡されたトークンをリストから削除し、 false
を返します。そのトークンが存在しなかった場合は、追加して true
を返します。
構文
toggle(token);
toggle(token, force);
引数
token
-
文字列で、トグル切り替えしたいトークンを表します。
force
省略可-
存在する場合は、片方の操作のみを行います。
false
に設定すると、token
を削除するだけとなり、追加は行いません。true
に設定すると、token
を追加するだけとなり、削除は行いません。
返値
true
または false
の論理値で、呼び出し後に token
がリストに存在するかどうかを示します。
例
クリック時にクラスをトグル切り替え
以下の例では、 <span>
要素に設定されたクラスのリストを DOMTokenList
として受け取るのに Element.classList
を使用しています。それからリスト内のトークンを置き換え、リストを <span>
の Node.textContent
に書き込みます。
最初に HTML です。
<span class="a b">classList is 'a b'</span>
そして JavaScript です。
const span = document.querySelector("span");
const classes = span.classList;
span.addEventListener('click', function() {
const result = classes.toggle("c");
if (result) {
span.textContent = `'c' added; classList is now "${classes}".`;
} else {
span.textContent = `'c' removed; classList is now "${classes}".`;
}
})
出力結果は以下のようになり、テキストをクリックするたびに変化します。
force 引数の設定
2 番目の引数は、クラスを含めるかどうかを決定するために使用することができます。この例では、ブラウザーのウィンドウ幅が 1000 ピクセル以上の場合にのみ 'c' クラスを含めます。
span.classList.toggle("c", window.innerWidth > 1000);
仕様書
Specification |
---|
DOM Standard # ref-for-dom-domtokenlist-toggle① |
ブラウザーの互換性
BCD tables only load in the browser