วัตถุรูปภาพ HTML DOM แสดงถึงองค์ประกอบ ของเอกสาร HTML
ให้เราสร้างวัตถุ img -
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
document.createElement(“IMG”);
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของวัตถุรูปภาพ -
| คุณสมบัติ | คำอธิบาย |
|---|---|
| alt | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ alt ขององค์ประกอบ HTML รูปภาพ |
| เสร็จสมบูรณ์ | ส่งกลับว่าเบราว์เซอร์โหลดรูปภาพในหน้าเว็บ HTML เสร็จแล้วหรือไม่ |
| crossOrigin | ส่งกลับและแก้ไขการตั้งค่า CROS ขององค์ประกอบ HTML รูปภาพ |
| ความสูง | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ความสูงขององค์ประกอบ HTML รูปภาพ |
| ความสูงธรรมชาติ | ส่งคืนความสูงตามธรรมชาติของรูปภาพในเอกสาร HTML |
| ความกว้างธรรมชาติ | คืนค่าความกว้างตามธรรมชาติของรูปภาพในเอกสาร HTML |
| src | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ src ขององค์ประกอบ HTML รูปภาพ |
| ใช้แผนที่ | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ useMap ขององค์ประกอบ HTML ของรูปภาพ |
| ความกว้าง | ส่งกลับและแก้ไขค่าแอตทริบิวต์ width ขององค์ประกอบ HTML ของรูปภาพ |
| isMap | ส่งกลับและแก้ไขว่ารูปภาพในเอกสาร HTML จะเป็นส่วนหนึ่งของแผนผังรูปภาพฝั่งเซิร์ฟเวอร์หรือไม่ |
ตัวอย่าง
ให้เราดูตัวอย่างของวัตถุรูปภาพ HTML DOM -
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.btn{
background-color:lightblue;
border:none;
height:2rem;
border-radius:50px;
width:60%;
margin:1rem auto;
display:block;
}
</style>
</head>
<body>
<h1>DOM Image Object Example</h1>
<button onclick="createIframe()" class="btn">Click me to create an image</button>
<script>
function createIframe() {
var x = document.createElement("IMG");
x.setAttribute("src",https://www.tutorialspoint.com/servlets/images/servlets-mini-logo.jpg");
x.setAttribute("alt", "Learn Servlets");
document.body.appendChild(x);
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
คลิกที่ “คลิกฉันเพื่อสร้างภาพ ” เพื่อสร้างองค์ประกอบภาพ -
