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:
- Before click on the button:
- Before click on the button:
- After click on the button:
- Google Chrome
- Mozilla Firefox
- Edge
- Safari
- Opera
Example-2:
<!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> <img id="myImg" alt="GFG_Logo"> <br> <button align="center" onclick="myGeeks()"> Click </button> <h4><p id="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
After click on the button:
Example-3:
<!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> <img id="myImg" alt="GFG_Logo"> <br> <button align="center" onclick="myGeeks()"> Click </button> <h4><p id="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
Supported Browsers:
Please Login to comment...