Aspectos básicos de la ubicación en modo de interpretación

Artículo
10/11/2017

La parte de Windows Internet Explorer que muestra el documento se denomina área de cliente. El área de cliente, que comienza en el borde superior izquierdo con las coordenadas x e y establecidas en 0, no tiene margen ni espaciado interno inherentes. El elemento BODY es el primer contenedor del documento y es el elemento primario de mayor nivel. Al igual que el área de cliente, el elemento BODY no tiene margen ni espacio interno predeterminados y también comienza en las coordenadas x e y establecidas en 0.

La distancia entre un elemento y su elemento primario con posicionamiento define la ubicación del elemento. Internet Explorer expone la ubicación del elemento cuando se representa el documento o cuando un cambio en el contenido obliga al explorador a volver a dibujar el documento. Para determinar y cambiar la ubicación de un elemento, es fundamental comprender cómo se ubican los elementos en el documento.

El diseño general de los elementos se basa principalmente en el flujo de documentos. En los idiomas que se escriben de izquierda a derecha, el flujo indica el diseño del contenido de izquierda a derecha y de arriba a abajo. A menos que se especifique lo contrario, los elementos en línea o de bloque que no tengan un posicionamiento absoluto fluyen de esta forma. Los elementos que tienen un posicionamiento absoluto se representan fuera del flujo del documento. El flujo del documento es el orden de los elementos tras calcular sus medidas. El cambio de las medidas o la ubicación de los elementos posicionados no afecta a los elementos adyacentes en el flujo del documento pero podría afectar a los elementos secundarios.

Los elementos en línea y de bloque no posicionados se representan juntos y forman parte del flujo del documento. La ubicación de un elemento puede cambiar al cambiar la medida de otro elemento que aparezca antes en el documento. La medida de un elemento cambia cuando se actualiza el contenido, el diseño o el estilo de fuente de otro elemento tras representar el documento. El cambio de las medidas de un elemento no posicionado cambia la ubicación de los elementos adyacentes en el flujo del documento.

Ubicaciones superior e izquierda

En el siguiente ejemplo se muestra cómo recuperar la ubicación de un elemento en línea y cómo afecta la medida de otro elemento a la ubicación de dicho elemento:

<script>
function getLocation(){
   alert("Left: " + ospan.offsetLeft);
   ospan1.innerHTML="Changed content.";
   alert("Left: " + ospan.offsetLeft);
   ospan1.innerHTML="This is some dynamic content.";
}
</script>
</body>
<span id="ospan1">This is some dynamic content.</span>
<span style="background-color: #CFCFCF;" id="ospan">
This content won't change, but this element's location will change.
</span>
<input type="button" value="Locate Second Element" onclick="getLocation()">
</body>

Elementos primarios con desplazamiento

Aunque se pueden recuperar las ubicaciones superior o izquierda de cualquier elemento representado, los valores de estas ubicaciones son relativas al elemento primario posicionado. No se puede confiar siempre en un solo valor para determinar la distancia entre dos elementos.

Elementos anidados

Para determinar la distancia entre cualquier elemento anidado y su elemento primario, como el elemento BODY, podría ser necesario incluir la ubicación del elemento primario. Por ejemplo, las ubicaciones superior e izquierda de un elemento TD devuelven la distancia entre la celda y el elemento primario, que es el elemento TABLE. Para determinar la distancia entre un elemento anidado y el elemento BODY, debe ir a un nivel superior en la jerarquía del documento y agregar los valores de la ubicación izquierda de todos los elementos primarios entre los dos elementos.

Ejemplo de ubicación

En el siguiente ejemplo se muestra cómo recuperar mediante programación la distancia absoluta entre un elemento TD y el elemento BODY:

<script>
function getAbsoluteLeft(oNode){
   var oCurrentNode=oNode;
   var iLeft=0;
   while(oCurrentNode.tagName!="body"){
      iLeft+=oCurrentNode.offsetLeft;
      oCurrentNode=oCurrentNode.offsetParent;
  }
   alert("Left: " + oNode.offsetLeft + "\nAbsolute Left: " + iLeft);
}
</script>
<body>
<input
   type="button"
   value ="Get Absolute Left"
   onclick="getAbsoluteLeft(oCell)"/>
<table cellspacing="2">
<tr><td id="oCell">Cell 1</td></tr>
</table>
</body>

Vea también

Conceptos

Referencia de hojas de estilos en cascada
Propiedades por nombre
Propiedades de medida y ubicación en modo estricto

Compartir a través de