ออบเจ็กต์ HTML DOM div เชื่อมโยงกับองค์ประกอบ HTML
Div เป็นองค์ประกอบระดับบล็อกวัตถุประสงค์ทั่วไปที่ช่วยให้เราสามารถจัดกลุ่มองค์ประกอบเข้าด้วยกันเพื่อใช้สไตล์กับองค์ประกอบเหล่านั้นหรือเพื่อจัดการกลุ่มองค์ประกอบ HTML ภายใต้ชื่อแท็กเดียวหรือ id
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของวัตถุ div -
| คุณสมบัติ | คำอธิบาย |
|---|---|
| จัดตำแหน่ง | เพื่อตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ align ขององค์ประกอบ คุณสมบัตินี้ไม่ได้รับการสนับสนุนใน HTML5 ใช้ css แทนการจัดตำแหน่ง |
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การสร้างวัตถุ div -
var p = document.createElement("DIV"); ตัวอย่าง
ให้เราดูตัวอย่างสำหรับวัตถุ HTML DOM div -
<!DOCTYPE html>
<html>
<body>
<h2>Div object example</h2>
<p>click on the CREATE button to create a div element with some text in it.</p>
<button onclick="createDiv()">CREATE</button>
<script>
function createDiv() {
var d = document.createElement("DIV");
var txt = document.createTextNode("Sample Div element");
d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue");
d.appendChild(txt);
document.body.appendChild(d);
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มสร้าง -
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้างปุ่ม CREATE ซึ่งจะรันเมธอด createDiv() เมื่อผู้ใช้คลิก -
<button onclick="createDiv()">CREATE</button>
ฟังก์ชัน createDiv() สร้าง
องค์ประกอบและกำหนดให้กับตัวแปร d จากนั้นจะสร้างโหนดข้อความและกำหนดให้กับตัวแปร txt จากนั้นเราตั้งค่าแอตทริบิวต์องค์ประกอบ
โดยใช้เมธอด setAttribute() จากนั้นโหนดข้อความจะถูกผนวกเข้ากับองค์ประกอบ
โดยใช้วิธี appendChild()
องค์ประกอบพร้อมกับโหนดข้อความนั้นจะถูกผนวกเป็นลูกเนื้อหาเอกสาร -
function createDiv() {
var d = document.createElement("DIV");
var txt = document.createTextNode("Sample Div element");
d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue");
d.appendChild(txt);
document.body.appendChild(d);
} 