Js:offsetWidth的Bug

最新推荐文章于 2021-10-26 17:16:36 发布

转载最新推荐文章于 2021-10-26 17:16:36 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/czm0718/p/5203935.html

文章标签：

#ui

本文解释了HTML元素offsetWidth属性的含义，并通过一个实例说明了它实际上代表的是元素盒模型的总宽度，包括width、padding和border。展示了如何正确理解和使用这一属性避免编程中的常见错误。

offsetWidth 得到的并不是当前元素width的宽度，而是当前元素盒模型的宽度。
例如：

#div1{width:200px; height:200px; border:1px solid black; background:red; padding:5px;}

<div>test<div>

这个时候的offsetWidth应该是200px+1px（左边框）+1px（右边框）+5px（左内边距）+5px（右内边距）

如果分不清这个会导致程序出问题。如下：

<script>
    setInterval(funtion(){
        var oDiv = document.getElementById("div1);
        oDiv.style.width = oDiv.offsetWidth - 1 + "px";
},30)
</script>

<style>
#div1{width:200px; height:200px; border:1px solid black; background:red;}
</style>

<body>
    <div id="id1"></div>
</body>

div1会越来越宽，而不是越来越窄。
因为定时器第一次执行时
offsetWidth是202px，-1之后是201px赋值给width（这里是元素的实际宽度）
定时器第二次执行时
offsetWidth是203px(201之前赋值给width的值+2边框),-1之后是202px赋值给width
……
所以div1会越变越宽而不是越变窄

转载于:https://www.cnblogs.com/czm0718/p/5203935.html