การจัดรูปแบบด้วยคลาสใน JavaScript

การจัดรูปแบบองค์ประกอบผ่านแอตทริบิวต์ style บางครั้งก็สะดวก แต่ส่วนใหญ่มักไม่ใช่ ความคิดที่ดีที่สุด ปัญหาคือสไตล์ จะกระจายอยู่ทั่วไฟล์ JavaScript และยากต่อการเปลี่ยนแปลง สะดวกกว่ามากในการกำหนดสไตล์ในไฟล์ CSS เพื่อให้สามารถเปลี่ยนแปลงได้ง่าย โดยไม่ต้องไปค้นในโค้ด JavaScript

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

.success {
	color: green;
}
.error {
	color: red;
}

ตอนนี้เมื่อแสดงข้อความ "ดี" เราจะให้คลาส "ดี" แก่องค์ประกอบ:

elem.textContent = 'good';
elem.classList.add('success');

และเมื่อแสดงข้อความ "ไม่ดี" เราจะให้คลาส "ไม่ดี" แก่องค์ประกอบ:

elem.textContent = 'bad';
elem.classList.add('error');

ให้ย่อหน้าซึ่งมีตัวเลข วนลูปผ่าน ย่อหน้าเหล่านี้ และย่อหน้าที่มี เลขคู่ ให้ตั้งค่าสีเป็นแดง ส่วนที่มีเลขคี่ - ให้ตั้งค่าสีเป็นเขียว