HTML DOM Image ऑब्जेक्ट HTML डॉक्यूमेंट के <img> एलिमेंट को दर्शाता है।
आइए एक img ऑब्जेक्ट बनाएं −
सिंटैक्स
निम्नलिखित सिंटैक्स है −
document.createElement(“IMG”);
प्रॉपर्टीज
Image ऑब्जेक्ट की निम्नलिखित प्रॉपर्टीज हैं −
| प्रॉपर्टी | व्याख्या |
|---|---|
| alt | यह HTML इमेज एलिमेंट के alt एट्रिब्यूट का मान रिटर्न और संशोधित करता है। |
| complete | यह रिटर्न करता है कि ब्राउज़र HTML वेब पेज पर इमेज लोड करना समाप्त कर चुका है या नहीं। |
| crossOrigin | यह HTML इमेज एलिमेंट के CORS सेटिंग को रिटर्न और संशोधित करता है। |
| height | यह HTML इमेज एलिमेंट के height एट्रिब्यूट का मान रिटर्न और संशोधित करता है। |
| naturalHeight | यह HTML डॉक्यूमेंट में इमेज की प्राकृतिक ऊंचाई रिटर्न करता है। |
| naturalWidth | यह HTML डॉक्यूमेंट में इमेज की प्राकृतिक चौड़ाई रिटर्न करता है। |
| src | यह HTML इमेज एलिमेंट के src एट्रिब्यूट का मान रिटर्न और संशोधित करता है। |
| useMap | यह HTML इमेज एलिमेंट के useMap एट्रिब्यूट का मान रिटर्न और बदलता है। |
| width | यह HTML इमेज एलिमेंट के width एट्रिब्यूट का मान रिटर्न और बदलता है। |
| isMap | यह रिटर्न और संशोधित करता है कि HTML डॉक्यूमेंट में इमेज सर्वर-साइड इमेज-मैप का हिस्सा होगी या नहीं। |
उदाहरण
आइए HTML DOM Image ऑब्जेक्ट का एक उदाहरण देखें −
<!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 ऑब्जेक्ट उदाहरण</h1> <button onclick="createIframe()" class="btn">इमेज बनाने के लिए मुझे क्लिक करें</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", "Servlets सीखें"); document.body.appendChild(x); } </script> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देगा −
इमेज एलिमेंट बनाने के लिए “इमेज बनाने के लिए मुझे क्लिक करें” बटन पर क्लिक करें −
