当前位置: 首页>>代码示例>>用法及示例精选>>正文


HTML Style width用法及代码示例

HTML DOM中的Style width属性用于设置或返回元素的宽度,该元素可以是block-level元素或具有固定位置的元素。

用法:

  • 它用于返回width属性:
    object.style.width
  • 它用于设置width属性:
    object.style.width = "auto|length|%|initial|inherit"

属性值说明


  • auto-该值由浏览器自动设置默认宽度值。
  • length-该值以指定的长度单位设置宽度值。
  • %-百分比值将宽度值设置为父元素宽度的指定百分比。
  • initial-此值将width属性设置为其浏览器的默认值。
  • inherit-此值将width属性设置为其父元素的值。

返回值:一个字符串,表示元素的宽度。

范例1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #GfG { 
            width:100px; 
            height:100px; 
            background-color:green; 
            color:white; 
        } 
    </style> 
</head> 
  
<body> 
  
    <p>HTML|DOM Style Width Property:</p> 
  
    <button onclick="myFunction()">Click here!</button> 
  
    <div id="GfG"> 
        <h1>GfG</h1> 
    </div> 
  
    <script> 
        function myFunction() { 
            document.getElementById("GfG") 
            .style.width = "500px"; 
        } 
    </script> 
  
</body> 
  
</html>

输出:

  • Before click on the button:
  • After click on the button:

范例2:

<!DOCTYPE html> 
<html> 
  
<body> 
  
    <h1>GeeksforGeeks</h1> 
  
    <h2>HTML|DOM Style Width Property:</h2> 
  
    <button type="button" id="myBtn" 
            onclick="myFunction()">Click Here!</button> 
  
    <script> 
        function myFunction() { 
            document.getElementById("myBtn") 
            .style.width = "500px"; 
        } 
    </script> 
  
</body> 
  
</html>

输出:

  • Before click on the button:
  • After click on the button:

支持的浏览器:DOM样式width属性支持的浏览器如下:

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


相关用法

注:本文由纯净天空筛选整理自divyatagoel0709大神的英文原创作品 HTML | DOM Style width Property。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。