ออบเจ็กต์คำบรรยาย HTML DOM เชื่อมโยงกับองค์ประกอบ HTML
คุณสมบัติ
หมายเหตุ :คุณสมบัติด้านล่างไม่รองรับใน HTML5
ต่อไปนี้เป็นคุณสมบัติ HTML DOM Caption Object -
| ทรัพย์สิน | คำอธิบาย |
|---|---|
| จัดตำแหน่ง | ในการตั้งค่าหรือส่งคืนการจัดตำแหน่งคำอธิบายภาพ |
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การสร้างวัตถุคำบรรยาย −
var x = document.createElement("CAPTION"); ตัวอย่าง
ให้เราดูตัวอย่างสำหรับออบเจกต์ HTML DOM Caption -
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px double black;
margin-top: 14px;
}
</style>
</head>
<body>
<p>Click the button below to create the caption for the table.</p>
<button onclick="createCaption()">CREATE</button>
<table id="SampleTable">
<tr>
<td colspan="2" rowpan="2">TABLE</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
<script>
function createCaption() {
var x = document.createElement("CAPTION");
var t = document.createTextNode("TABLE CAPTION");
x.appendChild(t);
var table = document.getElementById("SampleTable")
table.insertBefore(x, table.childNodes[0]);
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มสร้าง -
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้างปุ่ม CREATE เพื่อรันเมธอด createCaption() เมื่อคลิก -
<button onclick="createCaption()">CREATE</button>
เมธอด createCaption() สร้างองค์ประกอบคำบรรยายโดยใช้เมธอด createElement() ของอ็อบเจ็กต์เอกสารและกำหนดให้กับตัวแปร x จากนั้นจึงสร้างโหนดข้อความที่มีข้อความ "TABLE CAPTION" จากนั้นเราก็เพิ่มโหนดข้อความต่อท้ายองค์ประกอบ
สุดท้าย เราได้องค์ประกอบ
