Cómo usar las propiedades de medida y de ubicación
Los valores de medida y de ubicación no tienen que ser enteros estáticos. Pueden ser valores generados por script que se basen en distancias y dimensiones de otros elementos, longitudes expresadas (como en los soportes tradicionales) o ecuaciones. Al trabajar con varios elementos, se puede usar la medida de un elemento para establecer la ubicación de otro.
Se pueden utilizar las propiedades de medida y de ubicación que describimos aquí para construir sintaxis más complejas. Por ejemplo, para centrar un elemento en el contenedor correspondiente, se puede configurar la coordenada izquierda como la suma de la mitad del ancho del contenedor menos la mitad del ancho del elemento. En el siguiente ejemplo se demuestra la sintaxis:
<script>
function center(oNode){
var oParent=oNode.parentElement;
oNode.style.left=oParent.offsetWidth/2 - oNode.offsetWidth/2;
}
</script>
<div id="odiv"
onclick="center(this)"
style="position: absolute;">
Click Here To Center
</div>
Aunque DHTML DOM ofrece una forma sencilla de obtener las dimensiones y la ubicación actuales de un elemento, en la mayoría de los casos es necesario utilizar una hoja de estilos en cascada para establecer estos valores. Excepto en el caso de los elementos que exponen las propiedades height y width, como los elementos img y table, se pueden usar varios atributos de hoja de estilos en cascada para establecer el tamaño de un elemento. Aunque muchas propiedades devuelven los valores en píxeles, se pueden utilizar algunas propiedades de hoja de estilos en cascada con unidades de longitud específicas, como pulgadas o centímetros.
En el siguiente ejemplo, el elemento H1 se moverá 1 pulgada cada vez que el usuario haga clic en el elemento:
<script>
function moveMe(){
// Move the object by one inch.
oHeader.style.posLeft+=1;
oHeader.style.posTop+=1;
}
</script>
<h1 id="oHeader"
style="position: absolute; top: 1in; left: 1in;"
onclick="moveMe()">
Header
</h1>
Al mover los elementos a ubicaciones concretas de un documento, a veces es necesario tener en cuenta las distintas propiedades del elemento cuadro. Los valores de las propiedades height y width incluyen medidas de borde y espaciado interno. Mover un elemento a la esquina visible de otro elemento es relativamente sencillo con las propiedades offset y las técnicas descritas en el ejemplo anterior. Sin embargo, para posicionar un elemento en un punto específico del contenido de otro elemento posicionado, es necesario incluir el tamaño del espaciado interno y del borde. Para establecer una ubicación dentro de contenido de un elemento, se pueden usar las propiedades client o las propiedades padding y border.
En el siguiente ejemplo se muestran tres formas de posicionar un elemento dentro del contenido de otro elemento. En primer lugar, se utilizan las propiedades border y padding de la hoja de estilos en cascada para mover el elemento al contenido de un elemento posicionado. A continuación, se usan las propiedades offset y client de DHTML para mover un elemento dentro del contenido de un elemento posicionado sin tener en cuenta el espaciado interno.
<script>
function fnMove1(){
// Method 1: Use only CSS properties
var iTop1=odiv.style.pixelTop +
parseInt(odiv.style.border-top-width) +
parseInt(odiv.style.paddingTop);
var iLeft1=odiv.style.pixelLeft +
parseInt(odiv.style.border-left-width) +
parseInt(odiv.style.padding-left);
oMarker.style.top=iTop1;
oMarker.style.left=iLeft1;
}
function fnMove2(){
// Method 2: Use DHTML properties.
var iTop2=odiv.offsetTop + odiv.clientTop;
var iLeft2=odiv.offsetLeft + odiv.clientLeft;
oMarker.style.top=iTop2;
oMarker.style.left=iLeft2;
}
function fnMove3(){
// Method 3: Use DHTML, CSS, and a TextRectangle.
var aRects=odiv.getClientRects();
var oRect=aRects[0];
var oBnd=odiv.getBoundingClientRect();
oMarker.style.top=oBnd.top +
parseInt(odiv.style.paddingTop) +
parseInt(odiv.style.border Top);
oMarker.style.left=oBnd.left +
parseInt(odiv.style.padding-left) +
parseInt(odiv.style.border-left);;
}
</script>
<div id="odiv" style="position: absolute; top: 150px;
left: 50px; border: 10px outset; padding: 10px;
width: 250px; height: 250px; background-color: #EFEFEF;">
Move marker here.
</div>
<span id="oMarker" style="top: 200px; left: 200px;
position: absolute; border: 2px outset;
background-color: #CFCFCF;">
Marker
</span>
<input type="button" value ="CSS" onclick="fnMove1()">
<input type="button" value ="DHTML" onclick="fnMove2()">
<input type="button" value ="TextRectangle" onclick="fnMove3()">