การใช้คลาสเดียวสำหรับสไตล์ใน JavaScript

สมมติว่าเรามีสองคลาส ที่เราให้กับองค์ประกอบ ขึ้นอยู่ กับสถานะของมัน:

cssdiv.active {
  color: red;
}
div.passive {
  color: black;
}

ในความเป็นจริง การมีสองคลาสที่นี่ อาจทำให้เกิดความยุ่งยาก ในกรณีนี้เราสามารถ เขียนสไตล์ใหม่ได้ดังนี้ ผ่านตัวเลือก :not:

cssdiv.active {
  color: red;
}
div:not(active) {
  color: black;
}

ในกรณีนี้เราจะสามารถสลับคลาสของเรา ได้อย่างสะดวก ทำให้องค์ประกอบ แอ็กทีฟหรือไม่แอ็กทีฟ:

javascriptelem.classList.toggle('active');