Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML | DOM Image Object

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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", 
            
            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"
             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" 
             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

    My Personal Notes arrow_drop_up
Last Updated : 31 Jan, 2019
Like Article
Save Article
Similar Reads
Related Tutorials