Ejemplo de Dom HTMLElement.offsetLeft

los HTMLElement.offsetLeft La propiedad de solo lectura devuelve el número de píxeles que esquina superior izquierda del elemento actual está desplazado a la izquierda dentro de la HTMLElement.offsetParent nodo.

Para elementos a nivel de bloque, offsetTop, offsetLeft, offsetWidth, y offsetHeight describir el cuadro de borde de un elemento relativo a la offsetParent.

Sin embargo, para elementos de nivel en línea (como lapso) que puede pasar de una línea a la siguiente, offsetTop y offsetLeft describir las posiciones de la primero cuadro de borde (utilizar Element.getClientRects() para obtener su ancho y alto), mientras offsetWidth y offsetHeight describir las dimensiones del saltando cuadro de borde (utilizar Element.getBoundingClientRect() para obtener su posición). Por lo tanto, un cuadro con la izquierda, la parte superior, el ancho y la altura de offsetLeft, offsetTop, offsetWidth y offsetHeight no será un cuadro delimitador para un intervalo con texto ajustado.

Sintaxis

left = element.offsetLeft;

left es un número entero que representa el desplazamiento a la izquierda en píxeles desde el más cercano relativamente posicionado elemento padre.

Ejemplo

var colorTable = document.getElementById("t1");var tOLeft = colorTable.offsetLeft;if(tOLeft >5)// large left offset: do something here

Este ejemplo muestra una oración ‘larga’ que se envuelve dentro de un div con un borde azul y un cuadro rojo que uno podría pensar que debería describir los límites del tramo.

<divstyle="width: 300px;border-color:blue;border-style:solid;border-width:1;"><span>Short span. span><spanid="longspan">Long span that wraps within this div.span>div><divid="box"style="position: absolute;border-color: red;border-width: 1;border-style: solid;z-index: 10">div><scripttype="text/javascript">var box = document.getElementById("box");var longspan = document.getElementById("longspan");
  box.style.left = longspan.offsetLeft + document.body.scrollLeft +"px";
  box.style.top = longspan.offsetTop + document.body.scrollTop +"px";
  box.style.width = longspan.offsetWidth +"px";
  box.style.height = longspan.offsetHeight +"px";script>

Especificaciones

Compatibilidad del navegador

Ver también

• HTMLElement.offsetParent, HTMLElement.offsetTop, HTMLElement.offsetWidth, HTMLElement.offsetHeight