การกำหนดสไตล์ผ่านแอตทริบิวต์ style ใน JavaScript

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

html<div id="elem">
  ข้อความ
</div>

รับลิงก์ไปยังองค์ประกอบนั้นมาไว้ในตัวแปร:

javascriptlet elem = document.querySelector('#elem');

เปลี่ยนสไตล์ที่ต้องการให้กับองค์ประกอบ:

javascriptelem.style.color = 'red';

อ่านสไตล์ขององค์ประกอบ:

javascriptconsole.log(elem.style.color); // จะแสดงผล 'red';