JavaScript HTML CSS DOM เปลี่ยนแปลง
HTML DOM ช่วยให้จาวาสคริปต์ในการเปลี่ยนรูปแบบขององค์ประกอบของ HTML
รูปแบบการเปลี่ยนแปลง HTML
การเปลี่ยนรูปแบบขององค์ประกอบ HTML ใช้รูปแบบนี้:
document.getElementById(id).style.property=新样式
ตัวอย่างต่อไปนี้จะมีการเปลี่ยนแปลงรูปแบบ <p> องค์ประกอบ:
ตัวอย่าง
<! DOCTYPE html>
<html>
<head>
<Meta charset = "UTF-8">
<title> กวดวิชานี้ (w3big.com) </ title>
</ head>
<body>
<p id = "P1"> Hello World ! </ p>
<p id = "P2"> Hello World ! </ p>
<script> document.getElementById ( "P2" ) style.color = "สีฟ้า" ;. document.getElementById ( "P2") style.fontFamily = "Arial"; .. document.getElementById ( "P2") style.fontSize = "ขนาดใหญ่"; </ script>
<p> สคริปต์โดยการปรับเปลี่ยนย่อหน้าข้างต้น </ p>
</ body>
</ html>
ลอง»
ใช้เหตุการณ์
HTML DOM ช่วยให้เราสามารถรันโค้ดโดยเรียกเหตุการณ์ที่เกิดขึ้น
ยกตัวอย่างเช่นเหตุการณ์ที่เกิดขึ้นต่อไปนี้:
- องค์ประกอบที่มีการคลิก
- โหลดหน้า
- กล่องใส่มีการแก้ไข
- ......
ในส่วนต่อไปนี้คุณจะได้เรียนรู้มากขึ้นเกี่ยวกับความรู้เหตุการณ์
ตัวอย่างเช่นนี้จะเปลี่ยนรูปแบบ ID = "id1" องค์ประกอบ HTML เมื่อผู้ใช้คลิกปุ่มนี้:
ตัวอย่าง
<! DOCTYPE html>
<html>
<body>
<h1 id = "id1"> ฉันมุ่งหน้า 1 </ h1>
<ชนิดปุ่ม = "ปุ่ม"
onclick = "document.getElementById ( 'ID1'). style.color = 'red'">
ชี้ให้ฉัน! </ ปุ่ม>
</ body>
</ html>
<html>
<body>
<h1 id = "id1"> ฉันมุ่งหน้า 1 </ h1>
<ชนิดปุ่ม = "ปุ่ม"
onclick = "document.getElementById ( 'ID1'). style.color = 'red'">
ชี้ให้ฉัน! </ ปุ่ม>
</ body>
</ html>
ลอง»
ตัวอย่างเพิ่มเติม
ความชัดเจน
วิธีที่จะทำให้องค์ประกอบที่มองไม่เห็น องค์ประกอบที่คุณต้องการที่จะแสดงหรือหายไป?