Obtener y establecer estilos con jQuery

Como pudimos observar en el artículo anterior, la modificación de una clase nos permite elegir el estilo para cada elemento de nuestro documento sin la necesidad de modificar cada parte por separado, sin embargo existen ocasiones en que se desea reemplazar la hoja de estilo por completo y para ello jQuery nos ofrece otras opciones de estilización. Aplicar los estilos directamente en los elementos del DOM anula automáticamente las hojas de estilo y esto nos da un control más preciso sobre los estilo individuales.

Método “css()”

El método “css()” funciona de manera similar al comando “attr()” que utilizamos anteriormente, y al igual que este tiene varios formas de llamarse y aplicarse. En general este método nos permite establecer una propiedad CSS de manera individual, especificando su nombre y valor o dando una serie de elementos pasados en forma de objeto.

La primera forma que estudiaremos en este artículo será utilizando el nombre y el valor como parámetros de la función

Nombre y valor como parámetros

Cuando utilizamos la función “css()” con dos parámetros representando el nombre y el valor, esta se encargará de establecer dicho nombre de propiedad y valor especificados para cada elemento que coincida con el selector. El parámetro “name” debe ser una cadena, mientras que el parámetro “value” puede ser entregado como cadena, número o función; si lo que entregamos es una función, esta será invocada para cada elemento del conjunto y el valor que regrese será el que se le asignará a la propiedad.

Cuando especificamos el nombre de la propiedad lo podemos hacer utilizando el nombre exacto al estilo CSS o usando el tipo “camelCase”, por ejemplo si quisiéramos cambiar la propiedad relacionada al color del fondo del sitio podemos usar “.css(‘background-color’, ‘green’)” o “.css(‘backgroundColor’, ‘green’)”.

Como ya explicamos la sintaxis de esta función es muy similar a la de “attr()”, por lo que las funciones se aplican de la misma manera. Si por ejemplo quisiéramos aumentar 50 píxeles la anchura a todos los elementos que se encuentran en un conjunto, haríamos algo como esto:

jQuery("div.cambioDeWidth").css("width",function() {
    return jQuery(this).width() + 50 + "px";
});

Se que hasta ahora no hemos visto nada de la función “width”, pero no te preocupes la explicaremos más adelante, por simple lógica podemos definir que con esta función iteramos todos los elementos de tipo “div” que tienen la clase “cambioDeWidth” y añadimos 50 píxeles a su ancho.

Ahora vamos a ver otra forma de utilizar el comando “css()”, la cual funciona exactamente como la versión corta de la función “attr()”.

Objeto de propiedades como parámetro

Cuando utilizamos la función de la siguiente forma “css(objPropiedades)”, se establecen las propiedades CSS especificadas como parámetros, pasando sus valores asociados a todos los elementos encontrados. El parámetro “objPropiedades” debe ser un Objeto que especifique dichas propiedades.

Al igual que en la versión corta del comando “attr()”, podemos utilizar funciones como valores de cualquier propiedad CSS en el objeto, y dicha función será llamada para cada elemento del conjunto establecido para determinar el valor que se debe aplicar. Veamos el ejemplo para entender mejor:

jQuery('span').css('fontSize', '20px'); //esto establece una propiedad individual
jQuery('span').css({ 'fontSize' : '20px', 'color' : 'green' }); //esto establece propiedades múltiples

Como podemos observar, en la primera línea de código utilizamos la primera forma de llamado, indicando el nombre y valor de la propiedad de manera individual, esto tendrá efecto en todos los elementos de tipo “span”, pero qué pasa si queremos cambiar más de una propiedad a la vez, es entonces que recurrimos a la segunda línea de código la cual envía como parámetro un objeto con dos propiedades y sus respectivos valores.

Nombre como parámetro

Por último, tenemos una tercera forma de utilizar esta función, esta manera consiste en utilizar únicamente el nombre de la propiedad como parámetro del método. Este tipo de llamado es utilizado para obtener el valor de una propiedad una vez que el resto de las acciones ya se hayan llevado a cabo, es decir, después de que todos los estilos ya han sido aplicados.

Hay que aclarar que esta función recuperará únicamente el valor de la propiedad CSS especificada del primer elemento del conjunto envuelto. También debemos tener en cuenta que esta variante de la función “css()” siempre devuelve una cadena, así que si usted necesita un número o algún otro tipo de dato, tendrá que analizar el valor devuelto.