HTML | DOM Image Object

31 Jan, 2019
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.geeksforgeeks.org">        <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", "https://media.geeksforgeeks.org/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:
Example-2:
<!DOCTYPE html><html>  <head>    <base id="Geek_Base"          href="https://www.geeksforgeeks.org">    <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"src="https://media.geeksforgeeks.org/wp-content/uploads/gfg-39.png"          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"           href="https://www.geeksforgeeks.org">    <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" src="https://media.geeksforgeeks.org/wp-content/uploads/gfg-39.png"         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
HTML-DOM
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?