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=
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=
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>
|
Output:
Supported Browsers: The browsers supported by HTML DOM Input Image width Property are listed below:
- Google Chrome
- Edge 12+
- Firefox
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!