JavaScript classList は、要素の CSS (Cascading Style Sheet) クラスのスタイルを設定できる JavaScript の DOM プロパティです。 JavaScript classList は、CSS クラスの名前を返す読み取り専用プロパティです。これは、style や className などの JavaScript の他のプロパティに対する JavaScript のプロパティです。 style プロパティは CSS クラス要素の色またはその他のスタイルを返し、className は CSS ファイルで使用されるクラスの名前を返すために使用されます。ただし、className プロパティと classList プロパティは、CSS ファイルで使用したクラスの名前を返しますが、その方法は異なります。 className プロパティはクラスの名前を文字列形式で返しますが、classList プロパティは文字列の形式で返します。 JavaScript クラスの名前を配列の形式で返します。
ここでは、JavaScript classList について簡単に説明し、そのメソッドと実際の実装についても説明します。
Javaの参照変数
JavaScript の classList プロパティの例
以下は、要素のクラス値を取得する JavaScript の classList プロパティの例です。
<h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById('btn'); alert(e.classList); } 上記のコードの出力を以下に示します。
JavaScript の classList プロパティ
classList プロパティは、クラス要素の値を表すために使用されます。 DOMトークンリスト 物体。これは読み取り専用のプロパティですが、プログラムで使用されるクラスを操作することで値を変更できます。 JavaScript の classList プロパティは、クラス要素に対してさまざまな操作を実行できる次のメソッドで構成されています。
これらは、JavaScript classList で使用されるメソッドの一部です。
一つ一つ議論していきます。
classList.add()
1 つ以上のクラスを CSS 要素に追加するために使用される関数。
例：
以下の例は、classList.add() メソッドを使用してクラスを追加する方法を示しています。
.myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById('Btn'); e.classList.add('myClass'); } コードでは、ユーザーがボタンをクリックすると、新しいクラスが既存のクラスとともに追加されます。ボタンをクリックした後の出力は次のとおりです。
classList.remove()
Remove() 関数は、要素から既存のクラスを削除するために使用されます。
以下の例は、classlist.remove() メソッドを使用して 1 つ以上のクラスを削除する方法を示しています。
.myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById('Btn'); e.classList.remove('myClass'); } 上記のコードでは、ユーザーがボタンをクリックすると、指定された特定のクラスが既存の CSS クラスから削除されます。ボタンをクリックした後の出力は次のとおりです。
クラスリスト.toggle()
toggle() ボタンは、クラスを要素に切り替えるために使用されます。これは、新しいクラスを追加するか、既存のクラスを削除することを意味します。
以下は、 toggle() メソッドを使用してクラスを追加または削除する方法を理解するための例です。
Javaのスライス
例：
.myClass1{background: red;} .myClass2 {background: blue;} <h3> Click on the button to add or remove the class</h3> <br> function get_toggle() { var e = document.getElementById('Btn'); e.classList.toggle('myClass2'); } コードでは、ユーザーがボタンをクリックすると、クラスが CSS クラスに追加または削除されます。ボタンをクリックした後の出力は次のとおりです。
Classlist.contains()
contains() メソッドは、指定されたクラスが CSS クラスに存在するかどうかを確認するために使用され、それに関してブール値を true または false として返します。
以下は、contains() メソッドを使用してクラスが存在するかどうかを検索する方法を示す例です。
例：
function getClass() { var e = document.getElementById('Btn'); document.write(e.classList.contains('myClass')+' <br>'+'myclass is the name of the class'); } 上記のコードでは、ユーザーがボタンをクリックすると、CSS クラスに指定されたクラスが存在するかどうかをチェックすることがわかります。存在する場合は、ブール値 true が返されます。それ以外の場合は false を返します。ボタンをクリックした後の上記のコードの出力を以下に示します。
クラスリスト.replace()
replace() メソッドは、既存のクラスを新しいクラスに置き換えるために使用されます。これはクラスが要素から削除されるという意味ではなく、既存のクラスのプロパティが新しいクラスのプロパティに置き換えられます。
以下は、既存のクラスを新しいクラスに置き換える方法を理解するための例です。
例：
.myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } 上記のコードでは、ユーザーがボタンをクリックすると、既存のクラス プロパティが新しいクラス プロパティに置き換えられます。ボタンをクリックした後の出力は次のとおりです。
classList.item()
item() 関数は、指定されたインデックス値に存在するクラスの名前を返すために使用されます。
以下は、 item() メソッドを使用して値を返す方法を理解するための例です。
例：
<h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById('Btn'); alert(e.classList.item(2)); } コードでは、ユーザーがボタンをクリックすると、指定されたインデックスに存在するクラスが表示されます。ボタンをクリックすると、以下に示すように、指定されたインデックス クラス値が取得されます。
これらは classList DOM オブジェクトのメソッドの一部であり、classList に関するすべてです。