HTML DOM Input Image width Property

Last Updated : 15 Jun, 2023

The Input Image width Property In HTML DOM is used to return the value of the width attribute of the <input type="image">.

Syntax:

To return the width Property.

imageObject.width

To set the width Property.

imageObject.width = value;

Property Value: It contains the numeric value which specifies the width of the image in terms of pixels.

Return Value: It returns a numeric value that represents the width of the image.

Example 1: This Example returns the Input Image width Property.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM Input Image width Property
    </title>
</head>

<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h4>
        DOM Input Image width Property
    </h4>
    <button onclick="my_geek()">
        <input id="myImage" 
               type="image" 
               src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png"
               alt="Submit" 
               formaction="#" 
               formtarget="#" 
               formenctype="text/plain" 
               width="48" height="48">
    </button>
    <h2 id="Geek_h" style="color:green;"></h2>
  
    <script>
        function my_geek() {
            // Return the width of Input Image field
            let txt = document.getElementById(
                "myImage").width;
            document.getElementById(
                "Geek_h").innerHTML = txt;
        }
    </script>
</body>

</html>

Output:

Example 2: This Example sets the Input Image width Property.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM Input Image width Property
    </title>
</head>

<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h4>
        DOM Input Image width Property
    </h4>
    <button onclick="my_geek()">
        <input id="myImage" 
               type="image" 
               src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png"
               alt="Submit" 
               formaction="#" 
               formtarget="#" 
               formenctype="text/plain" 
               width="48" height="48">
    </button>
    <h2 id="Geek_h" style="color:green;"></h2>
  
    <script>
        function my_geek() {
            // change the width of Input Image field
            let txt = document.getElementById(
                "myImage").width = "96";
            document.getElementById(
                "Geek_h").innerHTML = txt;
        }
    </script>
</body>

</html>