Estamos tratando algunos de los métodos más importantes de jQuery relacionados con las hojas de estilo en cascada. El más importante de estos métodos para trabajar con las CSS de manera dinámica es justamente css() y aunque ya lo hemos podido introducir en artículos anteriores del Manual de jQuery, merece la pena dedicarle un poco de nuestro tiempo para aprender todas sus posibilidades
El método css() sirve tanto para recibir el valor de un atributo CSS como para asignarle un nuevo valor y su funcionamiento depende de los parámetros que podamos enviarle. Así que, para hablar sobre este método veremos cada uno de los posibles juegos de parámetros que podemos enviarle, explicando cada una de las opciones disponibles y ofreciendo diversos ejemplos.
.css( nombre_propiedad_css )
Si enviamos un solo parámetro al método CSS estamos indicando que queremos recibir el valor de una propiedad CSS. En este caso la función devolverá el valor del atributo CSS que le hayamos indicado.
Si tenemos un elemento en la página como este, al que le hemos colocado un identificador, atributo id="micapa":
<div id="micapa" style="color: red;">hola!</div>
Podremos acceder a alguna de sus propiedades css de la siguiente manera:
$("#micapa").css("color");
Esto nos devolverá el atributo "color" de ese elemento, que en este caso valía "color".
Como podemos suponer, el método CSS enviando un solo parámetro puede servir de mucha utilidad para obtener datos sobre los estilos actuales de nuestros elementos, no obstante, todavía es más utilizada la siguiente opción, en la que enviamos dos parámetros.
.css( nombre_propiedad_css, valor )
En este segundo caso, aparte del nombre de una propiedad CSS estamos enviando un segundo parámetro con un valor y nos servirá para asignar un nuevo estado a dicho atributo. Esta segunda manera de invocar al método CSS tiene además algunas variantes.
Cambiar un único atributo CSS: podemos enviar el nombre de un único atributo CSS y su nuevo valor.
$("#micapa").css("color", "green");
Con esto estaríamos cambiando el color del texto del elemento con id="micapa" y asignando el color verde ("green").
Cambiar varios atributos CSS al mismo tiempo: Podemos enviar todos los atributos CSS que deseemos y sus nuevos valores, en notación de objeto. Con esto conseguimos que, en una única llamada a css() se cambien varias propiedades a la vez.
$("#micapa").css({
"background-color": "#ff8800",
"position": "absolute",
"width": "100px",
"top": "100px",
"left": "200px"
})
Como se puede ver, se estarían actualizando con la anterior llamada a css() varios atributos CSS, como el color de fondo, la posición del elemento, su anchura, etc.
Sobre este punto vamos a dar un ejemplo adicional que puede estar bien para aprender a variar un atributo CSS teniendo en cuenta el valor anterior que tuviera.
$("#micapa").mouseover(function(){
antiguoLeft = parseInt($(this).css("left"));
//alert (antiguoLeft);
$(this).css("left", antiguoLeft + 10 + "px");
})
Con esto estamos definiendo un evento onmouseover sobre la capa con id="micapa", por lo que estas instrucciones se pondrán en ejecución cuando se pase el ratón por encima de la capa. Dentro del método estamos haciendo un par de cosas. Como primer paso estamos extrayendo el valor de la propiedad CSS "left" y convirtiéndola en un entero. Como segundo paso estamos actualizando ese valor de "left" y asignando un nuevo valor que sería 10 píxeles más que el valor antiguo. Para ello sumamos 10 al valor antiguo de "left" y lo concatenamos con la unidad de medida "px".
Cambiar un único atributo y colocar el valor según el resultado de una función: Este tercer uso es un poco más avanzado y está disponible sólo a partir de jQuery 1.4. Consiste en enviarle una función como segundo parámetro, en vez del valor directamente, para asignar al atributo el valor devuelto por esa función.
Esto es tan sencillo de poner en marcha como pasar una función que simplemente tenga un return. Pero hay un detalle y es que esa función recibe dos valores. El primero es el índice del elemento dentro del objeto jQuery que recibe el método y el segundo, más útil, sirve para obtener el valor actual que hay en el atributo que queremos cambiar.
Para ver este uso del método jQuery hemos preparado el siguiente ejemplo.
$("#micapa").click(function(){
$(this).css("width", function(index, value){
//alert (value);
var aumento = prompt("cuanto quieres aumentar?", "25");
return (parseInt(value) + parseInt(aumento)) + "px";
});
})
Como se puede ver, se define un evento clic sobre una capa. Luego utilizamos el método css() sobre el elemento, para cambiar el atributo width. El valor de width que se colocará será lo que devuelva la función indicada como segundo parámetro en el método css(). Si nos fijamos, la función devuelve un valor, que es lo que se colocará en el atributo width.
