Manejar estilos en jQuery con la función css()

jQuery

La función css() en jQuery te permite cambiar propiedades CSS de un elemento, aplicándole un estilo de manera inmediata. También se pueden obtener valores de propiedades CSS y cambiar múltiples propiedades CSS de una vez a un elemento.

Obtener el valor

Para obtener el valor de una propiedad de CSS, basta con pasar el nombre de la propiedad a la función css(). Este sería un ejemplo para obtener el fondo y pasarlo como valor a una variable.

JavaScript
1
var fondo = $('#contenedor').css('background-color');

Establecer un valor a una propiedad

Para establecer el valor a una propiedad CSS a un elemento, hay que pasar a la función css() la propiedad y el valor. El segundo argumento puede ser un valor string o un númerico.

JavaScript
1
2
$('body').css('width', '100%');
$('.cita').css('padding',100);

Establecer un valor a varias propiedades

Una de las formas para establecer varias propiedades de una vez hay que pasarle un objeto literal a la función css(). Un objeto literal son parejas de propiedades/valor con “:” entre estas y cada pareja es separada por comas. Todo esto entre corchetes “{}”. Por ejemplo

JavaScript
1
{ 'background-color' : '#FF0000', 'border' : '1px solid #000000' }

Cuando pases un objeto literal a la función puedes meter saltos de línea para que quede más legible.

JavaScript
1
2
3
4
$('#caja1').css({
  'background-color' : '#FF0000',
  'border' : '1px solid #000000'
});

Si el objeto literal no te gusta, puedes cambiar varias propiedades de manera «tradicional»

JavaScript
1
2
$('#caja1').css('background-color','#FF0000');
$('#caja1').css('border','1px solid #000000');

O encadenando varias funciones jQuery en una sola colección de elementos.

JavaScript
1
2
$('#caja1').css('background-color','#FF0000')
           .css('border','1px solid #000000');

Si tienes alguna duda para encadenar funciones te recomiendo este post.

Tips

  • Las propiedades que se establecen colores (background-color o color) la función css() devuelve los valores rgb o rgba,si tiene transparencia, y siempre con valores absolutos (255,10,10 por ejemplo). No importa si en la hoja de estilos se establece en hexadecimal, rgb en porcentajes o hsl.
  • Pasa todas las unidades a píxeles por tanto, si usas un Font-size de 150% te devolvería el valor en forma de píxel.