Aspectos básicos de las medidas
Las medidas que se utilizan con más frecuencia son el alto y el ancho. Para establecer estas medidas, use los atributos height y width (o propiedades relacionadas).
Los elementos en línea ganan en diseño cuando se establece el ancho o alto. Los elementos en línea con diseño exponen las mismas propiedades de diseño, como border, margin y padding, como elementos de bloque. En el siguiente ejemplo se muestra cómo afectan los atributos de diseño a la apariencia de una página web cuando se establece la propiedad height de un elemento:
<!-- Styles render because this link has layout. -->
<a href="https://msdn.microsoft.com/" style="width: 150px;
border: 1px solid; padding: 10px; margin: 5px;">MSDN Online</a>
<!-- Styles do not render because this link has no layout. -->
<a href="https://msdn.microsoft.com/" style="border: 1 solid; padding: 10px; margin: 5px;">MSDN Online</a>
Unidades de longitud absolutas y relativas
Cuando se establecen o recuperan los valores de medida y ubicación de un elemento, se pueden usar distintas unidades de longitud para conseguir un estilo concreto. El uso de unidades de longitud simplifica consecuentemente los valores de medida y ubicación. Si se utilizan diferentes unidades de longitud, es necesario determinar el valor de una unidad de longitud absoluta mediante programación, según la unidad relativa en cada sistema. Por ejemplo, tendría que convertir pulgadas en píxeles en cada equipo que represente el documento.
Las propiedades de diseño contribuyen a las dimensiones de un elemento y deberían tenerse en cuenta a la hora de determinar las dimensiones del contenido. Se ajusta el tamaño del contenido de un elemento en función de cualquier medida especificada menos las medidas del borde y espaciado interno. Puesto que las propiedades de hoja de estilos en cascada y DHTML no proporcionan una medida del contenido sin su espaciado interno, para recuperar una medida precisa deben consultarse específicamente las propiedades de espaciado interno. Aunque puede usar las propiedades de desplazamiento y cliente para determinar el tamaño del contenido, es más fácil restar al ancho del elemento el tamaño de las propiedades border y padding.
Supongamos el siguiente elemento DIV:
<div id="odiv" style="padding: 10px; width: 250px;
height: 250px; border: 2px outset; background-color: #CFCFCF;">
</div>
El ancho y alto especificado del elemento DIV anterior es 250 píxeles. Puede formular el ancho del contenido de la siguiente forma:
odiv.style.width - odiv.style.border Width - odiv.style.padding
Sin embargo, puesto que las tres propiedades devuelven tipos de datos variantes, debe convertir los valores en enteros o usar propiedades que devuelvan valores enteros. Por ejemplo, para obtener el ancho del elemento en píxeles, puede usar una de las siguientes técnicas en Jscript:
var iWidth = odiv.style.pixelWidth
var iWidth = parseInt(odiv.style.width)
(width is specified in pixels)
var iWidth = odiv.offsetWidth
Si los valores de las propiedades border y padding se establecen en las mismas unidades de longitud que la propiedad width, puede convertir el valor variante a un entero. Para determinar las dimensiones del contenido, use las propiedades border y padding y las dimensiones del elemento. Al recuperar los valores de borde y espaciado interno, use las propiedades border-width y padding si los valores son uniformes en todos los lados del elemento. En caso contrario, debe consultar específicamente las propiedades border-left-width, border-right-width, padding-left y padding-right para obtener una medida precisa.
Por ejemplo, para obtener el ancho del contenido en píxeles, puede usar una de las siguientes técnicas en Jscript, donde iWidth se basa en una de las técnicas del ejemplo anterior.
Use esta fórmula si los tamaños de borde y espaciado interno no son uniformes en todos los lados:
var iCntWidth = (iWidth - parseInt(odiv.style.border-left-width) parseInt(odiv.style.border-right-width) - parseInt(odiv.style.padding-left) - parseInt(odiv.style.padding-right) )Use esta fórmula si los tamaños de borde y espaciado interno son uniformes en todos los lados:
var iCntWidth = (iWidth - parseInt(odiv.style.border Width) parseInt(odiv.style.padding) )Use esta fórmula en vez de usar las propiedades de borde:
var iCntWidth = (iWidth - (odiv.offsetWidth - odiv.clientWidth) parseInt(odiv.style.padding) )
[!NOTA]
Estas fórmulas no funcionan si los valores de margen y espaciado interno se especifican mediante porcentajes.
Ejemplo de medida
En el siguiente ejemplo se usa la primera fórmula de la sección anterior para desplazar y ajustar el tamaño de un elemento posicionado basado en el contenido de otro elemento.
<script>
window.onload=fnInit;
function fnInit(){
var iWidth=odiv.style.pixelWidth;
var iHeight=odiv.style.pixelHeight;
var iCntWidth=(iWidth - parseInt(odiv.style.border-left-width)
- parseInt(odiv.style.border-right-width)
- parseInt(odiv.style.padding-left)
- parseInt(odiv.style.padding-right));
var iCntHeight=(iHeight - parseInt(odiv.style.border-top-width)
- parseInt(odiv.style.border-bottom-width)
- parseInt(odiv.style.paddingTop)
- parseInt(odiv.style.paddingBottom));
var iTop=odiv.offsetTop + parseInt(odiv.style.border Top)
+ parseInt(odiv.style.paddingTop);
var iLeft=odiv.offsetLeft + parseInt(odiv.style.border-left)
+ parseInt(odiv.style.padding-left);
odiv2.style.width=iCntWidth;
odiv2.style.height=iCntHeight;
odiv2.style.top=iTop;
odiv2.style.left=iLeft;
}
</script>
<div id="odiv" style="padding: 20px 5px 10px 10px;
width: 250px; height: 250px; border: 10px outset;
background-color: #CFCFCF;">
</div>
<div id="odiv2" style="position: absolute; border: 2 inset; background-color: #000099;">
</div>