วัตถุรูปภาพอินพุต HTML DOM แสดงถึงองค์ประกอบ ที่มีประเภท =” รูปภาพ” ของเอกสาร HTML
มาดูวิธีการสร้างวัตถุรูปภาพอินพุตกัน −
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
var imageInput = document.createElement(“INPUT”); imageInput.setAttribute(“type”,”image”);
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของวัตถุรูปภาพอินพุต HTML DOM -
| คุณสมบัติ | คำอธิบาย |
|---|---|
| Alt | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ alt ของรูปภาพที่ป้อน |
| ออโต้โฟกัส | แสดงผลว่าเบราว์เซอร์โหลดรูปภาพในหน้าเว็บ HTML เสร็จแล้วหรือไม่ |
| ค่าเริ่มต้น | ส่งกลับและแก้ไขค่าเริ่มต้นของรูปภาพที่ป้อน |
| ปิดการใช้งาน | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ที่ปิดใช้งานของรูปภาพที่ป้อน |
| แบบฟอร์ม | ส่งคืนการอ้างอิงของแบบฟอร์มที่มีฟิลด์รูปภาพที่ป้อนในเอกสาร HTML |
| formAction | ส่งกลับและแก้ไขค่าของ formaction แอตทริบิวต์ของภาพที่ป้อน |
| formEnctype | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ formnctype ของรูปภาพที่ป้อน |
| formMethod | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ formmethod ของรูปภาพที่ป้อน |
| formNoValidate | ส่งกลับและแก้ไขว่าข้อมูลของแบบฟอร์มควรได้รับการตรวจสอบหรือไม่ในการส่ง |
| formTarget | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ formtarget ของภาพที่ป้อน |
| ส่วนสูง | ส่งกลับและแก้ไขค่าแอตทริบิวต์ความสูงของรูปภาพที่ป้อน |
| ชื่อ | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ชื่อของรูปภาพที่ป้อน |
| Src | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ src ของรูปภาพที่ป้อน |
| พิมพ์ | ส่งคืนค่าแอตทริบิวต์ type ของรูปภาพที่ป้อน |
| ความคุ้มค่า | ส่งกลับและแก้ไขเนื้อหาของแอตทริบิวต์ค่าของรูปภาพที่ป้อน |
| ความกว้าง | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ width ของรูปภาพที่ป้อน |
ตัวอย่าง
ให้เราดูตัวอย่างของวัตถุภาพที่ป้อน −
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color:#363946;
color:#fff;
}
.btn{
background-color:#db133a;
border:none;
height:2rem;
border-radius:50px;
width:60%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM Input Image Object Example</h1>
<button onclick="createIframe()" class="btn">Create an image submit button</button>
<script>
function createIframe() {
var imageInput = document.createElement("INPUT");
imageInput.setAttribute("type", "image");
imageInput.setAttribute("src", "https://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg");
document.body.appendChild(imageInput);
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
คลิกที่ “สร้างปุ่มส่งรูปภาพ ” เพื่อสร้างวัตถุภาพอินพุต -
