JS修改Class

一、介紹

Class是為HTML和XML元素提供一種分門別類的方式，可以方便地對相同的元素應用相同的CSS樣式或JavaScript函數。

在JavaScript中，我們可以使用classList屬性來修改元素的class。classList是一個對象，它提供了add、remove、toggle等方法，可以使用這些方法來添加、刪除、切換class。

二、為元素添加class

使用classList屬性的add方法，可以為元素添加class。

element.classList.add("class1");

上述代碼中，element是我們需要修改class的元素，”class1″是新添加的class。

可以同時添加多個class，中間用逗號隔開：

element.classList.add("class1", "class2", "class3");

三、刪除元素的class

使用classList屬性的remove方法，可以刪除元素的class。

element.classList.remove("class1");

上述代碼中，element是我們需要修改class的元素，”class1″是需要刪除的class。

可以同時刪除多個class，中間用逗號隔開：

element.classList.remove("class1", "class2", "class3");

四、切換元素的class

使用classList屬性的toggle方法，可以切換元素的class。如果元素擁有該class，toggle方法會將它移除；如果元素沒有該class，toggle方法會將它添加。

element.classList.toggle("class1");

上述代碼中，element是我們需要修改class的元素，”class1″是需要切換的class。

可以使用第二個參數來控制是否強制添加或移除class：

element.classList.toggle("class1", true); //強制添加class1
element.classList.toggle("class1", false); //強制移除class1

五、替換元素的class

使用classList屬性的replace方法，可以替換元素的class。

element.classList.replace("oldClass", "newClass");

上述代碼中，element是我們需要修改class的元素，”oldClass”是需要被替換的class，”newClass”是新的class。

六、判斷元素是否含有某個class

使用classList屬性的contains方法，可以判斷元素是否含有某個class。

element.classList.contains("class1");

上述代碼中，element是需要被判斷的元素，”class1″是需要判斷的class。如果元素包含該class，返回true；否則返回false。

七、總結

通過classList屬性提供的add、remove、toggle、replace、contains等方法，我們可以方便地修改元素的class。在實際開發中，優雅的使用class可以減少代碼冗餘，提高開發效率。