DOMTokenList: toggle() メソッド

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", () => {
  const result = classes.toggle("c");
  span.textContent = `'c' ${
    result ? "added" : "removed"
  }; classList is now "${classes}".`;
});

出力結果は以下のようになり、テキストをクリックするたびに変化します。

2 番目の引数は、クラスを含めるかどうかを決定するために使用することができます。この例では、ブラウザーのウィンドウ幅が 1000 ピクセル以上の場合にのみ 'c' クラスを含めます。

span.classList.toggle("c", window.innerWidth > 1000);