HTML DOMTokenList toggle() メソッド

定義と使用法

toggle() メソッドは指定されたタグをリストから削除し、false を返します。タグが存在しない場合、追加し true を返します。

例

例 1

「myStyle」のオンオフを切り替えます：

const list = element.classList;
list.toggle("mywStyle");

実際に試してみる

例 2

要素に「myStyle」クラスを追加します：

const list = element.classList;
list.add("myStyle");

実際に試してみる

例 3

要素から「myStyle」クラスを削除します：

const list = element.classList;
list.remove("myStyle");

実際に試してみる

例 4

要素に複数のクラスを追加します：

element.classList.add("myStyle", "anotherClass", "thirdClass");

実際に試してみる

例 5

要素から複数のクラスを削除します：

element.classList.remove("myStyle", "anotherClass", "thirdClass");

実際に試してみる

例 6

要素のクラス数を取得します：

let numb = element.classList.length;

実際に試してみる

例 7

クラスを切り替えてドロップダウンボタンを作成します：

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

実際に試してみる

構文

domtokenlist.toggle(token)

パラメータ

パラメータ 説明
token 必須。切り替えたいトークン。

返り値

なし。

ブラウザのサポート

domtokenlist.toggle() は DOM レベル 4 (2015) の機能です。

すべてのブラウザがサポートしています：

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート

Internet Explorer 11（またはそれ以前のバージョン）は domtokenlist.toggle() をサポートしていません。

関連ページ

length 属性

item() メソッド

add() メソッド

remove() メソッド

replace() メソッド

forEach() メソッド

entries() メソッド

keys() メソッド

values() メソッド

DOMTokenList オブジェクト