getBoundingClientRect返回了意外值

Question

对于这些样式，如果我增加宽度，元素将从左侧增长。这意味着getBoundingClientRect（）。在我调整宽度后，该元素的右边应该有相同的值。

top: 0px;
width: 200px;
height: 200px;
right: 400px;

但是当我使用javascript来增加宽度时，情况就不一样了。为什么不呢？

当鼠标在元素上移动时，我会增加宽度，如下所示：

console.log(elm.getBoundingClientRect().right);
elm.style.width = parseInt(elm.style.width) + clientX - event.clientX + "px";

每次的输出都是不同的。

Answer 1

这意味着getBoundingClientRect（）。在我调整宽度后，该元素的右边应该有相同的值。

那是不正确的。right属性是表示元素最右边边界的坐标。如果你增加它的宽度，它相对于右边的位置将会减少（阅读：元素将变得“更接近”视口的右边边缘）。

反之亦然：增加宽度不会影响左边的属性。元素的位置（如边距或绝对坐标）。