JavaScript HTML DOM - แก้ไข CSS
- หน้าก่อน ฟอร์ม DOM
- หน้าต่อไป แอนิเมชัน DOM
HTML DOM 允许 JavaScript 更改 HTML 元素的样式。
改变 HTML 样式
如需更改 HTML 元素的样式，请使用此语法：
document.getElementById(id).style.property = new style
下面的例子更改了 <p> 元素的样式：
ตัวอย่าง
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>บทบาทของย่อยนี้ถูกเปลี่ยนโดยสคริปต์</p>
</body>
</html>
การใช้เหตุการณ์
HTML DOM อนุญาตให้คุณทำงานเมื่อเหตุการณ์เกิดขึ้น
เมื่อ"สิ่งบางอย่าง"เกิดขึ้นบนองค์ประกอบ HTML ทางบราวเซอร์จะสร้างเหตุการณ์:
- เมื่อกดองค์ประกอบใดๆ
- เมื่อหน้าโลกที่โหลด
- เมื่อช่องบันทึกเปลี่ยน
คุณจะได้เรียนรู้เกี่ยวกับเหตุการณ์มากขึ้นในบทดั้งเดียวนี้
ตัวอย่างนี้จะเปลี่ยนรูปแบบขององค์ประกอบ HTML ที่มี id="id1" เมื่อคุณกดปุ่ม:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">หัวข้อของฉัน 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
กดฉัน!
</button>
</body>
</html>
ตัวอย่างเพิ่มเติม
- Visibility
- หลักฐานที่ทำให้องค์ประกอบไม่มีศักยภาพ. คุณต้องการที่จะแสดงองค์ประกอบหรือไม่?
คู่มือติดตามวัตถุ Style ของ HTML DOM
ถ้าคุณต้องการที่จะดูความหมายของทั้งหมดของคุณที่เป็น HTML DOM รูปแบบ โปรดเข้าชม คู่มือติดตามวัตถุ Style ของ HTML DOM.
- หน้าก่อน ฟอร์ม DOM
- หน้าต่อไป แอนิเมชัน DOM
