HTML DOM इनपुट इमेज ऑब्जेक्ट एक HTML दस्तावेज़ के <इनपुट> तत्व को टाइप ="इमेज" के साथ दर्शाता है।
आइए देखें कि इनपुट इमेज ऑब्जेक्ट कैसे बनाया जाता है -
सिंटैक्स
निम्नलिखित वाक्य रचना है -
var imageInput = document.createElement(“INPUT”); imageInput.setAttribute(“type”,”image”);
गुण
HTML DOM इनपुट इमेज ऑब्जेक्ट के गुण निम्नलिखित हैं -
| संपत्ति | स्पष्टीकरण |
|---|---|
| Alt | यह एक इनपुट छवि की alt विशेषता के मान को लौटाता है और संशोधित करता है। |
| ऑटोफोकस | यह लौटाता है कि ब्राउज़र ने HTML वेब पेज में एक छवि लोड करना समाप्त कर दिया है या नहीं। |
| डिफ़ॉल्ट मान | यह एक इनपुट छवि के डिफ़ॉल्ट मान को लौटाता है और संशोधित करता है। |
| अक्षम | यह किसी इनपुट छवि की अक्षम विशेषता के मान को लौटाता है और संशोधित करता है। |
| फ़ॉर्म | यह उस प्रपत्र का संदर्भ देता है जिसमें HTML दस्तावेज़ में इनपुट छवि फ़ील्ड होता है। |
| फॉर्मएक्शन | यह एक इनपुट छवि के निर्माण विशेषता के मान को लौटाता है और संशोधित करता है। |
| formEnctype | यह किसी इनपुट छवि की फॉर्मेंकटाइप विशेषता के मान को लौटाता है और संशोधित करता है। |
| formMethod | यह एक इनपुट छवि की फॉर्ममेथोड विशेषता के मान को लौटाता है और संशोधित करता है। |
| formNoValidate | यह लौटाता है और संशोधित करता है कि फॉर्म के डेटा को जमा करने पर मान्य किया जाना चाहिए या नहीं। |
| फॉर्मटार्गेट | यह एक इनपुट छवि के स्वरूप लक्ष्य विशेषता के मान को लौटाता है और बदल देता है। |
| ऊंचाई | यह किसी इनपुट छवि की ऊंचाई विशेषता के मान को लौटाता है और संशोधित करता है। |
| नाम | यह एक इनपुट छवि के नाम विशेषता के मान को लौटाता है और बदल देता है। |
| Src | यह किसी इनपुट छवि की src विशेषता के मान को लौटाता है और संशोधित करता है। |
| प्रकार | यह एक इनपुट छवि के प्रकार विशेषता का मान देता है। |
| मान | यह एक इनपुट छवि के मूल्य विशेषता की सामग्री को लौटाता है और संशोधित करता है। |
| चौड़ाई | यह किसी इनपुट छवि की चौड़ाई विशेषता के मान को लौटाता है और संशोधित करता है। |
उदाहरण
आइए इनपुट इमेज ऑब्जेक्ट का एक उदाहरण देखें -
<!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> आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
“एक छवि सबमिट बटन बनाएं . पर क्लिक करें इनपुट इमेज ऑब्जेक्ट बनाने के लिए बटन -
