การตกแต่งด้วยคลาส CSS บน JavaScript

ในบทเรียนที่ผ่านมา เราเรียนรู้วิธีเปลี่ยน CSS styles ขององค์ประกอบผ่านการแก้ไขแอตทริบิวต์ style ซึ่งบ่อยครั้งก็ไม่ใช่ความคิดที่ดีนัก เพราะหากกระจาย CSS styles ไปทั่วโค้ด JavaScript การเปลี่ยนแปลง ดีไซน์ของเว็บไซต์ในภายหลังจะเป็นเรื่องยาก เนื่องจากต้องค้นหาในโค้ด JavaScript เพื่อหา styles ที่ฝังไว้ที่นั่น

วิธีที่สะดวกกว่าสำหรับการบำรุงรักษาในอนาคตคือ การเพิ่มหรือลบคลาส CSS ให้กับองค์ประกอบ เพื่อตกแต่งให้ได้รูปแบบตามที่ต้องการ

ลองดูตัวอย่าง สมมติว่าเรามี หลายย่อหน้า:

<p>ข้อความ1</p>
<p>ข้อความ2</p>
<p>ข้อความ3</p>

ลองทำให้เมื่อคลิกที่ย่อหน้าใดก็ตาม ย่อหน้านั้นจะถูกเปลี่ยนเป็นสีบางสี เช่น สีเขียว โดยในไฟล์ CSS เราจะสร้างคลาสพิเศษสำหรับการเปลี่ยนสี ให้ย่อหน้า:

.colored {
	color: green;
}

ข้อได้เปรียบของการใช้คลาสคือ ตอนนี้สามารถเปลี่ยนสีที่ต้องการ ได้ง่าย ๆ โดยเพียงแค่ทำการ แก้ไขในไฟล์ CSS โดยไม่ต้องยุ่งกับโค้ด JavaScript โดยเฉพาะอย่างยิ่งสะดวกในกรณีที่ คุณเป็นคนเขียนโค้ด JavaScript และในภายหลัง มีคนอื่นมาทำการตกแต่ง (อาจเป็น บุคคลที่มีทักษะน้อยกว่า ที่สามารถ ทำงานได้แค่กับ CSS)

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

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // เพิ่มคลาสให้ย่อหน้า
	});
}

อธิบายว่าทำไมฉันจึงเลือกชื่อคลาสว่า colored แทนที่จะเป็นคำว่า green ซึ่งบ่งชี้ถึงสีที่เราต้องการได้โดยตรง

ให้ย่อหน้าหนึ่ง ให้ปุ่ม 'ขีดฆ่า', 'ทำให้หนา', 'ทำให้เป็นสีแดง' ให้เมื่อกดปุ่มแต่ละปุ่ม การกระทำที่กำหนด จะเกิดขึ้นกับย่อหน้า (กลายเป็น สีแดง เป็นต้น)