Cómo encontrar las coordenadas del centro x del elemento y el desplazamiento de ventana relacionado

Me gustaría recuperar el desplazamiento del elemento a partir de sus propias coordenadas del centro x.

¿Cómo puedo hacerlo?

En realidad, puedo encontrar el desplazamiento de la ventana de un elemento, pero recupera las coordenadas del borde del elemento de esta manera:

var _position = $(this).offset();

preguntado el 06 de noviembre de 11 a las 14:11

No estoy seguro de lo que está tratando de obtener, ¿la posición del medio de su elemento en lugar de su parte superior izquierda? Además, $ position no es una sintaxis correcta, si es así, simplemente agregue width / 2 a la X y height / 2 a la altura y estará bien. -

@ShaiMishali Esa es la sintaxis correcta. Funciona perfectamente. No es la convención nombrar variables como esa en JavaScript. -

2 Respuestas

Tienes que usar offset() para obtener la posición superior e izquierda, luego agregue la mitad de la height() y width() valores para ellos. Eso da las coordenadas del centro.

var $this = $(this);
var offset = $this.offset();
var width = $this.width();
var height = $this.height();

var centerX = offset.left + width / 2;
var centerY = offset.top + height / 2;

Si necesita considerar la propiedad de relleno en sus cálculos, use lo siguiente:

var width = $this.outerWidth();
var height = $this.outerHeight();

respondido 19 mar '19, 20:03

¿Sabes si el ancho () se encarga de la regla css de relleno? - itsme

La padding la propiedad no esta incluida. Si también desea incluir el relleno, use .outerWidth(). - Rob W

Esto ahora se puede hacer a través de Javascript nativo también:

let centerX = targetNode.offsetLeft + targetNode.offsetWidth / 2;
let centerY = targetNode.offsetTop + targetNode.offsetHeight / 2;

donde targetNode es el elemento del que desea obtener sus coordenadas centrales.

Respondido 25 Oct 17, 02:10

Esto solo determina el centro relativo al OffsetParent del targetNode. Cualquier elemento padre (todo el camino hacia arriba en el árbol) con un posicionamiento diferente al estático (el predeterminado) afectará esto. - Rancio

este método devuelve indefinido en objetos svg - Fathy

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.