offsetWidth表示对象的可见宽度。
比如:
# div1 {
宽度:100 px;
身高:200 px;
背景:红色;
}
之前
结果:100
# div1 {
宽度:100 px;
身高:200 px;
背景:红色;
边界:2 px固体黑色;
}
之前
结果:104 (100 + 2 + 2)
# div1 {
宽度:100 px;
身高:200 px;
背景:红色;
边界:2 px固体黑色;
填充:20 px;
}
之前
结果:144 (100 + 2 + 2 + 20 + 20)
# div1 {
宽度:100 px;
身高:200 px;
背景:红色;
保证金:4 px;
}
之前
结果:100
* *
所以,<强> offsetWidth=宽度+填充+边界,和保证金无关。
* *
下面来看一个例子:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> offsetWidth
& lt;风格类型=" text/css "比;
# div1 {
宽度:500 px;
身高:200 px;
背景:红色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=" div1 "祝辞& lt;/div>
& lt;脚本type=" text/javascript祝辞
var oDiv=. getelementbyid (“div1”);
setInterval(函数(){
oDiv.style。宽度=oDiv。offsetWidth - 1 +“px”;
},50);
& lt;/script>
& lt;/body>
& lt;/html>
之前
<强>现象:红色div逐渐变窄,直到消失,没问题!
如果给div加一个边境呢?
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> offsetWidth
& lt;风格类型=" text/css "比;
# div1 {
宽度:500 px;
身高:200 px;
背景:红色;
边界:1 px固体黑色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=" div1 "祝辞& lt;/div>
& lt;脚本type=" text/javascript祝辞
var oDiv=. getelementbyid (“div1”);
setInterval(函数(){
oDiv.style。宽度=oDiv。offsetWidth - 1 +“px”;
},50);
& lt;/script>
& lt;/body>
& lt;/html>
之前
现象:红色div不仅没有变窄,反而越来越宽……
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> offsetWidth
& lt;风格类型=" text/css "比;
# div1 {
宽度:500 px;
身高:200 px;
背景:红色;
边界:1 px固体黑色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=" div1 "祝辞& lt;/div>
& lt;脚本type=" text/javascript祝辞
var oDiv=. getelementbyid (“div1”);
函数getStyle (obj, attr) {
如果(obj.currentStyle) {//IE
返回obj.currentStyle [attr);
其他}{
返回getComputedStyle (obj, false) [attr);
}
}
alert (getStyle (oDiv“宽度”));//直接弹出“500 px”
& lt;/script>
& lt;/body>
& lt;/html>
