With these styles, if I increase the width, the element grows from the left side. Which means that getBoundingClientRect().right on that element should have the same value after I adjusted the width.
top: 0px;
width: 200px;
height: 200px;
right: 400px;
But it's not the same when I use javascript to increase the width. Why not?
I increase the width when mouse moves over the element like this:
console.log(elm.getBoundingClientRect().right);
elm.style.width = parseInt(elm.style.width) + clientX - event.clientX + "px";
And the output is different every time.
Almost everytime when the width/height increases clientRect show different values for left, right, top, bottom. For example if we increase the width and the div only grows on the right side, the value of clientRect.left should be unchanged. But after the increase clientRect.left sometimes have a different value. There can be a slight difference in the decimal/fractional part of the value.
So now I know that
Which means that getBoundingClientRect().right on that element should have the same value after I adjusted the width.
That's incorrect. The right property is a coordinate representing the rightmost boundary of your element. If you increase its width, its position relative to the right will decrease (read: the element will become "closer" to the right edge of the viewport).
It's vice versa: increasing the width doesn't affect the left property. Element's position does (like margin or absolute coordinates).