Entre las clasificaciones de funciones jQuery que existen diversas que sirven para controlar los atributos de CSS de los elementos de la página, ya sea para acceder a los valores actuales de los atributos CSS o para alterarlos. En artículos anteriores del Manual de jQuery pudimos conocer varias de estas funciones, por ejemplo en el artículo de Añadir y quitar clases CSS sobre elementos.

En este artículo vamos a ver otras de las funciones que pone a nuestra disposición jQuery para acceder a la posición de los elementos en la página y a sus dimensiones. Estas funciones, aunque estaría mejor llamarles métodos (ya que pertenecen al objeto jQuery), son meramente informativas, para saber dónde están posicionados los elementos dentro del documento y sus medidas internas y externas. Lo veremos con detalle en breve, pero antes quiero señalar para los despistados que si queremos alterar las propiedades CSS de un elemento de la página con jQuery recordemos que está disponible el método css(), que hemos visto anteriormente en repetidas ocasiones a lo largo de este manual, enviándole como primer parámetro el nombre del atributo CSS a alterar y como segundo parámetro el valor del mismo.

Ahora voy a dar un listado de los métodos nuevos que vamos a ver en este artículo, comenzando por los que sirven para conocer las dimensiones de un elemento.

Métodos innerWidth() e innerHeight():
Reciben un objeto jQuery y devuelven las dimensiones internas del primer elemento que haya en dicho objeto jQuery, esto es, la anchura y altura respectivamente del elemento contando el padding del elemento pero no el borde.

Métodos outerWidth() e outerHeight():
Reciben un objeto jQuery y devuelven las dimensiones externas del primer elemento de dicho objeto jQuery recibido por parámetro, esto es, la anchura y altura respectivamente del elemento contando el padding del elemento y su borde.

Métodos offset() y position():
Ambos métodos devuelven la posición de un elemento en la página. Reciben un objeto jQuery y devuelven la localización del primer elemento que haya en ese objeto jQuery. La posición siempre se indica como valor de retorno del método por medio de un objeto que tiene dos atributos, "top" y "left", indicando los píxeles que está separado de la esquina superior izquerda del documento. La diferencia entre estos dos métodos es que offset() indica la posición del elemento real, teniendo en cuenta los márgenes del elemento, lo que suele ser más útil. Por su parte, position() indica la posición donde habría sido posicionado el elemento si no tuviera márgenes, lo que a menudo no es la posición real.

Función que muestra las dimensiones de un elemento

Por hacer unas pruebas con estos métodos, vamos a comenzar creando una función que muestra en una caja de alerta las dimensiones de un elemento cuyo selector se envíe por parámetro. A la función enviaremos el selector y luego con jQuery mostraremos sus valores de anchura y altura, tanto de la parte interior del elemento (innerWidth e innerHeight), como del elemento completo con su borde (outerWidth y outerHeight).

function dimensionCapa(capa){
capa = $(capa);
var dimensiones = "";
dimensiones += "Dimensiones internas: " + capa.innerWidth() + "x" + capa.innerHeight();
dimensiones += "\nDimensiones externas: " + capa.outerWidth() + "x" + capa.outerHeight();
alert(dimensiones);
}

Como decíamos, las dimensiones externas toman en cuenta el borde del elemento, si es que tiene, y las dimensiones internas no toman en cuenta el posible borde.

Función para mostrar la posición de un elemento

Ahora vamos a hacer una función similar a la anterior para mostrar un ejemplo de uso de las funciones position() y offset(). Esta función recibe un selector y muestra la localización de este elemento, tal como me la devuelven los métodos position() y offset().

function posicionCapa(capa){
capa = $(capa);
var posicion = "";
posicion += "Posición relativo al documento:\nLEFT: " + capa.offset().left + "\nTOP:" + capa.offset().top;
posicion += "\n\nPosición si no tuviera margen:\nLEFT: " + capa.position().left + "\nTOP:" + capa.position().top;
alert(posicion);
}

Si invocamos esta función sobre un elemento cualquiera que no tenga margen, las dos posiciones devueltas por position() y offset() serán las mismas, pero si aplicamos un margen a ese elemento, el elemento cambiará de lugar en la página y entonces el valor de offset() también cambirá, pero no el de position().

Ejemplo completo sobre los métodos de dimensiones y posición de elementos

Las dos funciones anteriores las podemos ver en marcha en un ejemplo que hemos creado para poder explicar mejor todos los métodos comentados en este artículo de DesarrolloWeb.com.

En el ejemplo simplemente se realizan las acciones para averiguar las posiciones y dimensiones de un par de elementos de la página. Además, tenemos un par de botones para alterar el CSS de los elementos dinámicamente y así volver a ver sus posiciones y dimensiones y comprobar cómo han cambiado.

Realmente no sirve de mucho el ejemplo, pero al menos esperamos que resultará bastante didáctico. Podemos verlo en marcha en una página aparte.

Ahora el código de este ejemplo, que no debería resultar muy complicado si hemos seguido el manual de jQuery hasta este punto.

<html>
<head>
<title>Funciones CSS en jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script type="application/x-javascript">
function dimensionCapa(capa){
capa = $(capa);
var dimensiones = "";
dimensiones += "Dimensiones internas: " + capa.innerWidth() + "x" + capa.innerHeight();
dimensiones += "\nDimensiones externas: " + capa.outerWidth() + "x" + capa.outerHeight();
alert(dimensiones);
}
function posicionCapa(capa){
capa = $(capa);
var posicion = "";
posicion += "Posición relativo al documento:\nLEFT: " + capa.offset().left + "\nTOP:" + capa.offset().top;
posicion += "\n\nPosición si no tuviera margen:\nLEFT: " + capa.position().left + "\nTOP:" + capa.position().top;
alert(posicion);
}
$(document).ready(function(){
$("#botondimensiones").click(function(){
dimensionCapa("#capa1");
});
$("#botonposicion").click(function(){
posicionCapa("#capa1");
});
$("#botontamano").click(function(){
$("#capa1").css("width", 200);
});
$("#botonmargen").click(function(){
$("#capa1").css("margin", 20);
});
$("#botondimensionesc2").click(function(){
dimensionCapa("#capa2");
});
$("#botonposicionc2").click(function(){
posicionCapa("#capa2");
});

});

</script>

</head>
<body>
<h1>Funciones CSS en jQuery de dimensiones y posición</h1>
<p>Probando funciones de localización de elementos en la página...</p>
<div id="capa1" style="padding: 24px; background-color: #ffccdd; float: left; border: 2px dotted #666;">
<h2>capa1:</h2>
Voy a crear esta capa para ver lo que mide y donde está posicionada.
</div>
<br style="clear: both;">
<div style="margin: 10px;">
<button id="botondimensiones" type="button">Dimensiones de capa1</button>
<button id="botonposicion" type="button">Posicion de capa1</button>
<button id="botontamano" type="button">Cambiar tamaño capa1</button>
<button id="botonmargen" type="button">Cambiar margen capa1</button>
</div>

<div style="margin: 10px;">
<button id="botondimensionesc2" type="button">Dimensiones de capa2</button>
<button id="botonposicionc2" type="button">Posicion de capa2</button>
</div>

<br>
Desplaza la página hacia abajo para ver la capa2...
<br>
<br>
...
<br>
<div id="capa2" style="background-color:#ccc; border-bottom: 5px solid #999; margin-left: 10px;">
Esta capa está muy hacia abajo!!
</div>
</body>
</html>

Para acabar, podemos ver este script funcionando en una página aparte.