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
相关用法
- HTML HR width用法及代码示例
- HTML Video width用法及代码示例
- HTML Table width用法及代码示例
- HTML Object width用法及代码示例
- HTML Screen width用法及代码示例
- HTML embed width用法及代码示例
- HTML IFrame width用法及代码示例
- HTML Input Image width用法及代码示例
- HTML Style top用法及代码示例
- HTML Style right用法及代码示例
- HTML Style textIndent用法及代码示例
- HTML Style animationTimingFunction用法及代码示例
- HTML Style visibility用法及代码示例
注:本文由纯净天空筛选整理自divyatagoel0709大神的英文原创作品 HTML | DOM Style width Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。