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

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

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

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

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

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

elem.classList.toggle('active');

กำหนดให้มีพารากราฟ สร้างให้ พารากราฟแต่ละอันเมื่อคลิกครั้งแรก เปลี่ยนเป็นสีแดง และเมื่อคลิกครั้งที่สอง - เปลี่ยนกลับเป็นสีดำ