ข้อดีของการจัดสไตล์โดยใช้คลาส CSS ใน JavaScript

การใช้คลาสแทนการเปลี่ยนแปลงสไตล์โดยตรง มีข้อดีอีกประการหนึ่ง ด้วยการเคลื่อนไหวมือเพียงเล็กน้อย สามารถทำให้สไตล์ขององค์ประกอบสลับกันได้

ตัวอย่างเช่น สามารถทำได้โดยที่เมื่อคลิกครั้งแรก ที่ย่อหน้าจะถูกทาสีด้วยสีที่กำหนด และเมื่อคลิกซ้ำ - จะกลับคืนสู่ สีเดิม สำหรับสิ่งนี้เพียงแค่ เปลี่ยนเมธอด add เป็นเมธอด toggle:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.toggle('colored');
	});
}

ปรับเปลี่ยนงานก่อนหน้าเพื่อให้ การกดปุ่มซ้ำจะยกเลิกการกระทำ ของปุ่มนั้น