[JavaScript] className/classList

13210 ワード
js JavaScript TIL テキストリンク

1.クラスの読み込み

className:クラスを返す
<div id='id1' class='class1 class2'/>
console.log(document.getElementById('id1').className);
// id1의 클래스 리턴 -> class1 class2
classList:クラスを返す
<div id='id1' class='class1 class2'/>
console.log(document.getElementById('id1').classList);
// id1의 클래스 리턴 -> class1 class2
classList.item(index):特定のインデックスのクラス・アイテムを返します.
<div id='id1' class='class1 class2'/>
console.log(document.getElementById('id1').classList.item(0));
// class1
console.log(document.getElementById('id1').classList.item(1));
// class2

2.クラスの設定/変更

className = '이름':直接値指定によるクラスの設定
document.getElementById('id1').className = 'hello';
classList.replace('변경전이름', '변경후이름'):特定のクラス名の検索と変更
document.getElementById('id1').classList.replace('hello', 'bye');

3.クラスの追加

className += ' 이름':既存のクラスに新しいクラスを追加
*既存のclassNameに追加する値をスペースに関連付けます.追加する新しいクラスがclassプロパティに含まれている場合でも、実行は続行されます.
document.getElementById('id1').className += ' bye';
// 스페이스바도 함께. 문자열로 연결
classList.add('이름'):既存のクラスに新しいクラスを追加
*classNameとは異なり、スペースを追加する必要はありません.追加する新しいクラスがclassプロパティに含まれている場合は、スペースは追加されません.classList.add('이름1', '이름2', '이름3' ...):一度に複数のクラスを追加
document.getElementById('id1').classList.add('bye');
document.getElementById('id1').classList.add('nice', 'to', 'meet', 'you');

4.クラスの削除

classList.remove('이름'):削除するクラス名を追加classList.remove('이름1', '이름2', '이름3' ...):複数のクラスを一度に削除
document.getElementById('id1').classList.remove('bye');
document.getElementById('id1').classList.remove('nice', 'to', 'meet', 'you');

5.クラスが存在するかどうかによって

classList.toggle('이름'):クラスリストに存在する場合はクラスを削除し、存在しない場合はクラスを追加します.
document.getElementById('ex').classList.toggle('exist');
// 실행할 때마다 exist라는 클래스명이 추가됐다가 제거됐다가 반복
classList.contains('이름'):クラスリストにクラスが存在する場合はtrueを返し、クラスが存在しない場合はfalseを返します.
<div id='id1' class='class1'/>
console.log(document.getElementById('id1').classList.contains(class1));  //true
console.log(document.getElementById('id1').classList.contains(class2));  //false

6.等級個数

classList.length:クラスカウントの戻り
<div id='id1' class='class1 class2'/>
console.log(document.getElementById('id1').classList.length);  // 2

7.まとめ


- className

className:クラスの読み込みclassName = '이름':クラス設定className += ' 이름':クラスの追加

- classList (replace/add/remove/toggle/contains)

classList:クラスの読み込みclassList.item(index):クラスごとの読み込みclassList.replace('변경전이름', '변경후이름'):クラスの変更classList.add('이름'):クラスの追加classList.remove('이름'):クラスの削除classList.toggle('이름'):クラスの追加/削除classList.contains('이름'):戻りクラスが存在するかどうかclassList.length:クラスカウント
参考資料
🔗 クラスの追加/変更/削除/読み込み
ソート・シリーズ(2)--クイック・ソート
Database_SQL_CRUD