HTML | DOM Image Object
The Image Object in HTML DOM is used to represent the HTML < image > element.
This tag is used to set or get the properties of < image > element. This element can be accessed by using getElementById() method.
Syntax:
document.getElementById("Image_ID");
This Image_ID is assigned to HTML < image > element.
Example-1:
<!DOCTYPE html><html> <head> <base id="Geek_Base" <title> HTML | DOM Image Object </title></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>HTML | DOM Image Object</h2> <button onclick="myGeeks()"> Click </button> <h4><p id="Geek_p" style="color:green"> </p></h4> <script> function myGeeks() { // Creating IMG object. var x = document.createElement("IMG"); x.setAttribute("src", x.setAttribute("width", "304"); x.setAttribute("height", "228"); x.setAttribute("alt", "GFG_Logo"); document.body.appendChild(x); } </script></body> </html> |
Output
- Before click on the button:
- After click on the button:
Example-2:
<!DOCTYPE html><html><head><baseid="Geek_Base"<title>HTML | DOM Image Object</title></head><bodystyle="text-align:center;"><h1style="color:green;">GeeksForGeeks</h1><h2>HTML | DOM Image Object</h2><imgid="myImg"alt="GFG_Logo"><br><buttonalign="center"onclick="myGeeks()">Click</button><h4><pid="Geek_p"style="color:green"></p></h4><script>function myGeeks() {// Accessing image element.var x =document.getElementById("myImg").src;document.getElementById("Geek_p").innerHTML = x;}</script></body></html>Output
- Before click on the button:
After click on the button:
Example-3:
<!DOCTYPE html><html><head><baseid="Geek_Base"<title>HTML | DOM Image Object</title></head><bodystyle="text-align:center;"><h1style="color:green;">GeeksForGeeks</h1><h2>HTML | DOM Image Object</h2><imgid="myImg"alt="GFG_Logo"><br><buttonalign="center"onclick="myGeeks()">Click</button><h4><pid="Geek_p"style="color:green"></p></h4><script>function myGeeks() {// Return Image width.var x = document.getElementById("myImg").width;document.getElementById("Geek_p").innerHTML = x;}</script></body></html>Output
- Before click on the button:
- After click on the button:
Supported Browsers:
- Google Chrome
- Mozilla Firefox
- Edge
- Safari
- Opera
- Before click on the button:
.png)
