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
>
<
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
- Before click on the button:
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
- Before click on the button:
- After click on the button:
Supported Browsers:
- Google Chrome
- Mozilla Firefox
- Edge
- Safari
- Opera
- Before click on the button: