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...