javascript - elementos - ¿Cómo obtener la posición superior de un elemento en relación con la ventana del navegador?

obtener id de un elemento javascript

Question

Quiero obtener la posición de un elemento relativo a la ventana del navegador (la ventana en la que se muestra la página, no toda la página). ¿Cómo se puede hacer esto en JavaScript?

Muchas gracias

Answer 1

Algunas veces el valor de propiedad del objeto getBoundingClientRect() muestra 0 para IE. En ese caso, debe establecer display = ''block'' para el elemento. Puede usar el código a continuación para que todos los navegadores obtengan compensación.

Extienda la funcionalidad de jQuery:

(function($) {
jQuery.fn.weOffset = function () {
var de = document.documentElement;
$(this).css("display", "block");
var box = $(this).get(0).getBoundingClientRect();
var top = box.top + window.pageYOffset - de.clientTop;
var left = box.left + window.pageXOffset - de.clientLeft;
return { top: top, left: left };
};
}(jQuery));

Utilizar :

var elementOffset = $("#" + elementId).weOffset();

Answer 2

Creo que jQuery en realidad se implementa de una manera muy elegante. Si miras la fuente de offset , encontrarás que básicamente es la forma en que la implementan:

var rect = elem.getBoundingClientRect();
var win = elem.ownerDocument.defaultView;
return {
top: rect.top + win.pageYOffset,
left: rect.left + win.pageXOffset
};

Answer 3

En mi caso, solo para estar seguro con respecto al desplazamiento, agregué la ventana. Desplácese a la ecuación:

var element = document.getElementById(''myElement'');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;

Eso me permite obtener la posición relativa real del elemento en el documento, incluso si se ha desplazado.

Answer 4

Gracias por todas las respuestas. Parece que Prototype ya tiene una función que hace esto (la función de página ()). Al ver el código fuente de la función, descubrí que primero calcula la posición del desplazamiento del elemento relativo a la página (es decir, la parte superior del documento), y luego resta el scrollTop de eso. Vea el código fuente del prototipo para más detalles.

Answer 5

La función de this página devolverá un rectángulo con las coordenadas superior, izquierda, altura y ancho de un elemento pasado en relación con el puerto de visualización del navegador.

 localToGlobal: function( _el ) {
var target = _el,
target_width = target.offsetWidth,
target_height = target.offsetHeight,
target_left = target.offsetLeft,
target_top = target.offsetTop,
gleft = 0,
gtop = 0,
rect = {};
var moonwalk = function( _parent ) {
if (!!_parent) {
gleft += _parent.offsetLeft;
gtop += _parent.offsetTop;
moonwalk( _parent.offsetParent );
} else {
return rect = {
top: target.offsetTop + gtop,
left: target.offsetLeft + gleft,
bottom: (target.offsetTop + gtop) + target_height,
right: (target.offsetLeft + gleft) + target_width
};
}
};
moonwalk( target.offsetParent );
return rect;
}

Answer 6

Puedes probar:

node.offsetTop - window.scrollY

Funciona en Opera con metaetiqueta de ventana gráfica definida.

Answer 7

btn1 existe un elemento que tiene una identificación de btn1 en la página web, y también que jQuery está incluido. Esto ha funcionado en todos los navegadores modernos de Chrome, FireFox, IE> = 9 y Edge. jQuery solo se usa para determinar la posición relativa al documento.

var screenRelativeTop = $("#btn1").offset().top - (window.scrollY ||
window.pageYOffset || document.body.scrollTop);
var screenRelativeLeft = $("#btn1").offset().left - (window.scrollX ||
window.pageXOffset || document.body.scrollLeft);

Answer 8

Editar: agregue un código a la cuenta para el desplazamiento de la página.

function findPos(id) {
var node = document.getElementById(id);
var curtop = 0;
var curtopscroll = 0;
if (node.offsetParent) {
do {
curtop += node.offsetTop;
curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
} while (node = node.offsetParent);
alert(curtop - curtopscroll);
}
}

El argumento id es la identificación del elemento cuyo desplazamiento desea. Adaptado de una publicación de quirksmode .

Answer 9

Las respuestas existentes ahora están desactualizadas. El getBoundingClientRect() nativo getBoundingClientRect() ha existido desde hace bastante tiempo y hace exactamente lo que la pregunta requiere. Además, es compatible con todos los navegadores (¡incluido el IE 5, parece!)

Desde la página MDN :

El valor devuelto es un objeto TextRectangle, que contiene propiedades de solo lectura a la izquierda, arriba, derecha e inferior que describen el cuadro de borde, en píxeles, con la parte superior izquierda relativa a la parte superior izquierda de la ventana gráfica .

Lo usas así:

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport, i.e. the window
var top = viewportOffset.top;
var left = viewportOffset.left;