DOMTokenList: toggle() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
toggle() は DOMTokenList インターフェイスのメソッドで、渡されたトークンをリストから削除し、 false を返します。そのトークンが存在しなかった場合は、追加して true を返します。
構文
js
toggle(token)
toggle(token, force)
引数
返値
true または false の論理値で、呼び出し後に token がリストに存在するかどうかを示します。
例
クリック時にクラスをトグル切り替え
以下の例では、 <span> 要素に設定されたクラスのリストを DOMTokenList として受け取るのに Element.classList を使用しています。それからリスト内のトークンを置き換え、リストを <span> の Node.textContent に書き込みます。
最初に HTML です。
html
<span class="a b">classList is 'a b'</span>
そして JavaScript です。
js
const span = document.querySelector("span");
const classes = span.classList;
span.addEventListener("click", () => {
const result = classes.toggle("c");
span.textContent = `'c' ${
result ? "added" : "removed"
}; classList is now "${classes}".`;
});
出力結果は以下のようになり、テキストをクリックするたびに変化します。
force 引数の設定
2 番目の引数は、クラスを含めるかどうかを決定するために使用することができます。この例では、ブラウザーのウィンドウ幅が 1000 ピクセル以上の場合にのみ 'c' クラスを含めます。
js
span.classList.toggle("c", window.innerWidth > 1000);
仕様書
| 仕様書 |
|---|
| DOM # ref-for-dom-domtokenlist-toggle① |