Método css
El método css permite obtener
y modificar los estilos CSS de un elemento.
Es importante recordar que obtendremos los 'valores
calculados' de las propiedades (computed style
properties), que pueden diferir de los
especificados en los estilos css.
Sintaxis
Obtener una propiedad:
$(selector).css(propiedad);
Obtener varias propiedades, el parámetro pasado es un array de nombres de propiedades:
$(selector).css(['width', 'height', 'color']);
Cambiar una propiedad:
$(selector).css(propiedad, nuevo valor);
Cambiemos varias propiedades, pasándolas como un objeto
que contiene pares 'clave: valor'. El nombre de la propiedad
se especifica en formato CamelCase:
$(selector).css({fontSize: '12px', color: 'red'});
O, una alternativa:
<p class="www">texto</p>
$('.www').css({'font-size':'12px', 'color':'red'});
También podemos aplicar una función determinada a cada
elemento del conjunto. En este caso, la función
recibirá como primer parámetro el índice del elemento en el conjunto, y como segundo parámetro
- el valor actual de la propiedad css especificada
para el elemento concreto. Además, this
dentro de la función hará referencia al elemento actual.
La propiedad CSS de cada elemento cambiará a aquella
que devuelva la función específicamente para ese elemento:
$(selector).css(nombre de la propiedad, function(índice en el conjunto, valor actual de la propiedad css));
Ejemplo
Obtengamos todos los elementos con la clase www
y cambiemos su color a rojo:
<p class="www">texto</p>
$('.www').css('color', 'red');
Ejemplo
Obtengamos todos los elementos con la clase www
y cambiemos su color a rojo, y el tamaño de fuente
- a 20px:
<p class="www">texto</p>
$('.www').css({color:'red', fontSize:'20px'});
O, una alternativa:
<p class="www">texto</p>
$('.www').css({'color':'red', 'font-size':'20px'});
