Latest web development tutorials

HTML DOM Style width attribute

Style Object Reference Style Objects

Definition and Usage

width property sets or returns the width of the element.

width attribute only play a role in the elements block-level element or an absolute / fixed position. Overflow overflow attribute content may be restricted.

grammar

Setting the width property:

Object.style.width="auto|length|%|inherit"

Back width attributes:

Object.style.width

描述
auto 默认。浏览器设置的宽度。
length 使用 px、cm 等单位定义宽度。
% 定义宽度为父元素的百分比。
inherit width 属性的值从父元素继承。


Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

All major browsers support width attribute.

Note: IE7 and earlier versions do not support the "inherit" value.IE8 only provides! DOCTYPE supported "inherit". IE9 support "inherit".


Examples

Examples

Set the button's width:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<script>
function displayResult(){
    document.getElementById("b1").style.width="300px";
}
</script>
</head>
<body>

<input type="button" id="b1" onclick="displayResult()" value="修改按钮的宽度">

</body>
</html>

try it"


Style Object Reference Style Objects