HTML Input Image width用法及代码示例

HTML DOM中的Input Image width属性用于返回<input type =” image”>的width属性的值。

用法:

要返回width属性。
```
imageObject.width
```
设置width属性。
```
imageObject.width = value;
```

属性值：它包含一个数值，以像素为单位指定图像的宽度。

返回值：它返回一个代表图像宽度的数值。

范例1：本示例返回输入图像宽度属性。

<!DOCTYPE 
<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 formTarget, formEnctype and formAction.  
            var txt = document.getElementById(  
            "myImage").width; 
            document.getElementById(  
            "Geek_h").innerHTML = txt;  
        }  
    </script>  
</body>  
  
</html>

输出：

在单击按钮之前：
单击按钮后：

范例2：本示例设置“输入图像宽度”属性。

<!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 formTarget, formEnctype and formAction.  
            var txt = document.getElementById(  
            "myImage").width = "96"; 
            document.getElementById(  
            "Geek_h").innerHTML = txt;  
        }  
    </script>  
</body>  
  
</html>

输出：

在单击按钮之前：
单击按钮后：

支持的浏览器：下面列出了HTML DOM输入图像宽度属性支持的浏览器：

谷歌浏览器
IE浏览器
Firefox
Opera
Safari

相关用法

注：本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 HTML | DOM Input Image width Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。