Con estos estilos, si aumento el ancho, el elemento crece desde el lado izquierdo. Lo que significa que getBoundingClientRect(). Justo en ese elemento debería tener el mismo valor después de ajustar el ancho.
top: 0px; width: 200px; height: 200px; right: 400px;Pero no es lo mismo cuando uso javascript para aumentar el ancho. ¿Por que no?
Aumento el ancho cuando el mouse se mueve sobre el elemento de esta manera:
console.log(elm.getBoundingClientRect().right); elm.style.width = parseInt(elm.style.width) + clientX - event.clientX + "px";Y la salida es diferente cada vez.
Casi cada vez que aumenta el ancho/alto, clientRect muestra diferentes valores para izquierda, derecha, arriba, abajo. Por ejemplo, si aumentamos el ancho y el div solo crece en el lado derecho, el valor de clientRect.left debería permanecer sin cambios. Pero después del aumento, clientRect.left a veces tiene un valor diferente. Puede haber una ligera diferencia en la parte decimal/fraccional del valor.
Así que ahora sé que
Lo que significa que getBoundingClientRect(). Justo en ese elemento debería tener el mismo valor después de ajustar el ancho.
Eso es incorrecto. La propiedad right es una coordenada que representa el límite más a la derecha de su elemento. Si aumenta su ancho, su posición relativa a la derecha disminuirá (léase: el elemento se "acercará" al borde derecho de la ventana gráfica).
Es viceversa: aumentar el ancho no afecta la propiedad de la left . La posición del elemento sí (como el margen o las coordenadas absolutas).