HTML DOM Image width Property

Last Updated : 05 Oct, 2021

The HTML DOM Image width Property is used to set or return the value of the width attribute of the <img> element. It returns a numeric value in terms of pixels.

Syntax:

It returns the width property.

imageObject.width

It sets the width property.

imageObject.width = pixels

Property Values:

pixels: It specifies the width of the Image element in terms of pixels.

Return Value: It returns a string value that represents the width of the image in terms of pixels.

Example 1: This example illustrates how to return the Image width property.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
        <h1 style="color: green"> 
            GeeksforGeeks 
        </h1> 
          
        <h2>HTML DOM Image width Property</h2> 
          
        <img id="GFG" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
            width="400" height="150" /> 
        <br> 
          
        <button onclick="Geeks()"> 
            Click me! 
        </button> 
          
        <p id="sudo"></p> 
  
    </center> 
  
    <script> 
        function Geeks() { 
            var g = document.getElementById("GFG").width; 
            document.getElementById("sudo").innerHTML = g + "px"; 
        } 
    </script> 
</body> 
  
</html>

Output:

Example 2: This example sets the image width property.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
        <h1 style="color: green"> 
            GeeksforGeeks 
        </h1> 
          
        <h2>HTML DOM Image width Property</h2> 
          
        <img id="GFG" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
            width="400" height="150" /> 
        <br> 
          
        <button onclick="Geeks()"> 
            Click me! 
        </button> 
          
        <p id="sudo"></p> 
  
    </center> 
    <script> 
        function Geeks() { 
            var g = document.getElementById("GFG").width = "200"; 
            document.getElementById("sudo").innerHTML = g + "px"; 
        } 
    </script> 
</body> 
  
</html>