JavaScript นิยาย

บทที่นี้มีตัวอย่างบางส่วนที่แสดงความสามารถของ JavaScript

JavaScript สามารถเปลี่ยนเนื้อหา HTML

getElementById() เป็นหนึ่งในวิธี JavaScript HTML หลายวิธี

ตัวอย่างนี้ใช้วิธีนี้เพื่อ "หา" องค์ประกอบ HTML ที่มี id="demo" และนำเนื้อหาขององค์ประกอบinnerHTMLแก้ไขเป็น "Hello JavaScript"：

ตัวอย่าง

document.getElementById("demo").innerHTML = "Hello JavaScript";

ทดลองด้วยตัวเอง

คำเตือน：JavaScript รับเอาเครื่องหมายเรียกใช้วงล้อมและวงล้อมอักษรตัวเล็ก

ตัวอย่าง

document.getElementById("demo").innerHTML = 'Hello JavaScript';

ทดลองด้วยตัวเอง

JavaScript สามารถเปลี่ยนคุณสมบัติ HTML

ตัวอย่างนี้ผ่านการเปลี่ยนแปลง <img> แบบแฟรม src คุณสมบัติ (source) ในการเปลี่ยนแปลงภาพ HTML

หลอดไฟ


ทดลองด้วยตัวเอง

JavaScript สามารถเปลี่ยนแปลงสไตล์ (CSS) HTML องค์ประกอบ

การเปลี่ยนแปลงสไตล์ HTML องค์ประกอบ เป็นทางเลือกหนึ่งของการเปลี่ยนแปลงคุณสมบัติ HTML

ตัวอย่าง

document.getElementById("demo").style.fontSize = "25px";

ทดลองด้วยตัวเอง

JavaScript สามารถซ่อน HTML องค์ประกอบ

สามารถเปลี่ยนแปลงได้ display สไตล์เพื่อซ่อน HTML องค์ประกอบ：

ตัวอย่าง

document.getElementById("demo").style.display="none";

ทดลองด้วยตัวเอง

JavaScript สามารถแสดง HTML องค์ประกอบ

สามารถเปลี่ยนแปลงได้ display สไตล์เพื่อแสดง HTML องค์ประกอบที่ซ่อนดินแดน：

ตัวอย่าง

document.getElementById("demo").style.display="block";

ทดลองด้วยตัวเอง

อ่านเพิ่มเติม

ตัวเรียน JavaScript ระดับสูง： JavaScript ประกาศตัวแปรเริ่มต้น 、 การทำงาน JavaScript