การกำหนดสไตล์ให้กับองค์ประกอบผ่านแอตทริบิวต์ style ใน JavaScript

ตอนนี้เรามาเรียนรู้วิธีการเพิ่มสไตล์ CSS ให้กับองค์ประกอบกัน ซึ่งทำได้โดยการเปลี่ยนแปลงแอตทริบิวต์ style ตัวอย่างเช่น หากต้องการเปลี่ยนสี จะต้องสร้าง ลำดับดังนี้: elem.style.color, และกำหนดค่าเป็นสีที่ต้องการ

มาดูตัวอย่างกัน สมมติว่าเรามีองค์ประกอบดังนี้:

html<p id="elem">text</p>

ทำให้องค์ประกอบนี้มีสีแดง:

javascriptlet elem = document.querySelector('#elem');
elem.style.color = 'red';