HTML DOM classList Propery

<Elementオブジェクト

例

追加"mystyle"にクラスを<div>要素：

document.getElementById("myDIV").classList.add("mystyle");

»それを自分で試してみてください

もっと"Try it Yourself"以下の例。

定義と使用法

CLASSLISTプロパティは、クラス返しname(s) DOMTokenListオブジェクトとして、要素を。

このプロパティは、要素のCSSクラスを追加、削除および切り替えに便利です。

CLASSLISTプロパティは読み取り専用です、しかし、あなたが使用して、それを修正することができadd()し、 remove()メソッド。

クロスブラウザのソリューション：CLASSLISTプロパティはIE9でサポートし、以前されていません。ただし、使用することができたclassName （参照クロスブラウザのソリューションのためのプロパティや正規表現を"More Examples"このページの一番下に）。

ブラウザのサポート

表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。

プロパティ
classList	8.0	10.0	3.6	5.1	11.5

構文

element .classList

プロパティ

プロパティ	説明
length	数を返し、リスト内のクラスを。このプロパティは読み取り専用です

メソッド

方法	説明
add( class1, class2, ... )	要素に1つ以上のクラス名を追加します。指定されたクラスがすでに存在する場合は、クラスが追加されることはありません
contains( class )	要素が指定されたクラス名を持っているかどうかを示すブール値を返します。可能な値：真 - 要素が指定されたクラス名が含まれています偽 - 指定されたクラス名が含まれていない要素
item( index )	要素から指定したインデックス番号でクラス名を返します。インデックスは0から始まります。インデックスが範囲外の場合はnullを返します。
remove( class1, class2, ... )	要素から1人のまたは複数のクラス名を削除します。注：存在しないクラスを削除し、エラーをスローしません
toggle( class, true\|false)	要素のクラス名を切り替えます。最初のパラメータは、要素から指定されたクラスを削除し、falseを返します。クラスが存在しない場合は、その要素に追加され、戻り値はtrueです。オプションの2番目のパラメータは関係なく、それが既に存在しているか否かの、追加または削除するクラスを強制的にブール値です。例えば：要素 .classList：クラスを削除してください。 toggle("classToRemove", false) ; 要素 .classList：クラスを追加します。 toggle("classToAdd", true) ; 注意：二番目のパラメータは、Internet ExplorerやOpera 12およびそれ以前ではサポートされていません。

技術的な詳細

戻り値：	クラスのリストを含むDOMTokenList、 name(s)元素のを

その他の例

例

複数のクラスを追加し<div>要素：

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

»それを自分で試してみてください

例

クラスを削除し<div>要素：

document.getElementById("myDIV").classList.remove("mystyle");

»それを自分で試してみてください

例

複数のクラスを削除する<div>要素：

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

»それを自分で試してみてください

例

以下のための2つのクラス間の切り替え<div>要素：

document.getElementById("myDIV").classList.toggle("newClassName");

»それを自分で試してみてください

例

クラスゲットname(s)の<div>要素を：

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>

var x = document.getElementById("myDIV").classList;

xの結果は次のようになります。

mystyle anotherClass thirdClass

»それを自分で試してみてください

例

どのように多くのクラス名を見つける<div>要素があります。

var x = document.getElementById("myDIV").classList.length;

xの結果は次のようになります。

»それを自分で試してみてください

例

最初のクラス名を取得(index 0)の<div>要素を：

var x = document.getElementById("myDIV").classList.item(0);

xの結果は次のようになります。

mystyle

»それを自分で試してみてください

例

要素は持っているかどうかを確認してください"mystyle"クラス：

var x = document.getElementById("myDIV").classList.contains("mystyle");

xの結果は次のようになります。

true

»それを自分で試してみてください

例

要素は持っているかどうかを確認してください"mystyle"クラスを。その場合は、別のクラス名を削除します。

var x = document.getElementById("myDIV");

if (x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
}

»それを自分で試してみてください

例

ドロップダウンボタンを作成するためのクラスを切り替えます：

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
}
}

»それを自分で試してみてください

フォールバック例：追加

CLASSLISTを用いたクロスブラウザ溶液。 add() IE9とそれ以前のための方法を、：

var x = document.getElementById("myDIV");

if (x.classList) {
x.classList.add("mystyle");
} else {
x.className = "mystyle"; // For IE9 and earlier
}

»それを自分で試してみてください

フォールバック例：削除

CLASSLISTを用いたクロスブラウザ溶液。 remove() ：IE9とそれ以前のための方法を、

var x = document.getElementById("myDIV");

if (x.classList) {
x.classList.remove("mystyle");
} else {
x.className = x.className.replace(/\bmystyle/g, ""); // For IE9 and earlier
}

»それを自分で試してみてください

フォールバック例：含まれてい

CLASSLISTを用いたクロスブラウザ溶液。 contains() IE9とそれ以前のための方法は、：

var x = document.getElementById("myDIV");

if (x.classList) {
alert(x.classList.contains("mystyle"));
} else {
alert(/\bmystyle/g.test(x.className)); // For IE9 and earlier
}

»それを自分で試してみてください

フォールバック例：トグル

CLASSLISTを用いたクロスブラウザ溶液。 toggle() IE9のための方法であって、

var x = document.getElementById("myDIV");

if (x.classList) {
    x.classList.toggle("mystyle");
} else {
    // For IE9
    var classes = x.className.split(" ");
    var i = classes.indexOf("mystyle");

    if (i >= 0)
        classes.splice(i, 1);
    else
        classes.push("mystyle");
        x.className = classes.join(" ");
}

»それを自分で試してみてください

JavaScript 参照

JavaScript

ブラウザ BOM

HTML DOM

HTML オブジェクト

その他のオブジェクト

HTML DOM classList Propery

例

定義と使用法

ブラウザのサポート

構文

プロパティ

メソッド

技術的な詳細

その他の例

例

例

例

例

例

例

例

例

例

例

フォールバック例：追加

フォールバック例：削除

フォールバック例：含まれてい

フォールバック例：トグル

関連ページ