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" href = "https://www.w3wiki.net" > < title > HTML | DOM Image Object </ title > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >HTML | DOM Image Object</ h2 > < button onclick = "myBeginner()" > Click </ button > < h4 >< p id = "Geek_p" style = "color:green" > </ p ></ h4 > < script > function myBeginner() { // Creating IMG object. var x = document.createElement("IMG"); x.setAttribute("src", "https://media.w3wiki.net/wp-content/uploads/gfg-39.png"); 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" href = "https://www.w3wiki.net" > < title > HTML | DOM Image Object </ title > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >HTML | DOM Image Object</ h2 > < img id = "myImg" src = "https://media.w3wiki.net/wp-content/uploads/gfg-39.png" alt = "GFG_Logo" > < br > < button align = "center" onclick = "myBeginner()" > Click </ button > < h4 >< p id = "Geek_p" style = "color:green" ></ p ></ h4 > < script > function myBeginner() { // 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" href = "https://www.w3wiki.net" > < title > HTML | DOM Image Object </ title > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >HTML | DOM Image Object</ h2 > < img id = "myImg" src = "https://media.w3wiki.net/wp-content/uploads/gfg-39.png" alt = "GFG_Logo" > < br > < button align = "center" onclick = "myBeginner()" > Click </ button > < h4 >< p id = "Geek_p" style = "color:green" ></ p ></ h4 > < script > function myBeginner() { // Return Image width. var x = document.getElementById( "myImg").width; document.getElementById( "Geek_p").innerHTML = x; } </ script > </ body > </ html > |
Output
Supported Browsers: