ออบเจ็กต์ HTML DOM Figure ใช้สำหรับแสดงองค์ประกอบ HTML
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับการสร้างวัตถุรูป -
var p = document.createElement("FIGURE"); ตัวอย่าง
ต่อไปนี้เป็นวิธีที่คุณสามารถสร้างวัตถุรูป -
<!DOCTYPE html>
<html>
<head>
<script>
function createFigure(){
var fig = document.createElement("FIGURE");
fig.setAttribute("id", "Figure1");
document.body.appendChild(fig);
var i = document.createElement("IMG");
i.setAttribute("src", "https://www.tutorialspoint.com/servlets/images/servletsmini-logo.jpg");
i.setAttribute("width", "250");
i.setAttribute("height", "200");
i.setAttribute("alt", "Eiffel Tower");
fig.appendChild(i);
}
</script>
</head>
<body>
<h2>HTML DOM figure object</h2>
<button onclick="createFigure()">CREATE</button><br><br>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มสร้าง -
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้างปุ่ม CREATE ซึ่งจะรันฟังก์ชัน createFigure() เมื่อผู้ใช้คลิก -
<button onclick="createFigure()">CREATE>/button><br><br>
ฟังก์ชัน createFigure() สร้างองค์ประกอบรูปโดยใช้เมธอด createElement() ของอ็อบเจ็กต์เอกสาร การใช้ setAttribute() เราตั้งค่า id ขององค์ประกอบตัวเลข และสุดท้ายผนวกเข้ากับเนื้อหาของเอกสารโดยใช้เมธอด appendChild() จากนั้นเราจะสร้าง img องค์ประกอบอื่นเพื่อใส่รูปภาพไว้ในองค์ประกอบรูป
เมื่อใช้เมธอด setAttribute() เราตั้งค่าองค์ประกอบ img src, width, height และ alt ในที่สุดองค์ประกอบ img จะถูกผนวกเป็นลูกขององค์ประกอบรูปโดยใช้วิธี appendChild() -
function createFigure(){
var fig = document.createElement("FIGURE");
fig.setAttribute("id", "Figure1");
document.body.appendChild(fig);
var i = document.createElement("IMG");
i.setAttribute("src", "EiffelTower.jpg");
i.setAttribute("width", "250");
i.setAttribute("height", "200");
i.setAttribute("alt", "Eiffel Tower");
fig.appendChild(i);
} 