jQuery css(): Cambiar y obtener las propiedades CSS

Vamos a repasar la función de jQuery css(), su funcionalidad es la de obtener o cambiar los valores de las propiedades de una hoja de estilo CSS.

Otras funciones similares o con las que se puede complementar son:

jQuery animate(): Animaciones modificando estilos CSS.
jQuery addClass() y removeClass(): Añadir y eliminar clases del DOM.
jQuery html(): Obtener o asignar código html en el DOM.
jQuery show() y hide(): Mostrar y ocultar divs, ids, clases…
jQuery remove(): Eliminar elementos y contenidos del DOM.
jQuery attr(): Modificar u obtener el valor de atributos.
height() y width(): Obtener y modificar el ancho y alto de elementos.

Sintaxis de jQuery css() para obtener propiedades CSS

Os muestro la sintaxis para obtener las propiedades de hojas de estilo extraída de su web oficial:

css(propertyname);

1	css(propertyname);

Os explico el único parámetro a pasar:

propertyname (Obligatorio): Propiedad o atributo del cual queremos obtener su valor.

Sintaxis de jQuery css() para cambiar propiedades CSS

Os muestro la sintaxis de esta función de jQuery para cambiar las propiedades de hojas de estilo extraída de su web oficial:

css(propertyname, value);

1	css(propertyname, value);

Os explico los parámetros a pasar:

propertyname (Obligatorio): Propiedad o atributos del cual queremos cambiar su valor.
value (Obligatorio): Valor asignado a la propiedad o atributo.

Ejemplo de jQuery CSS para obtener el valor de una propiedad CSS

Vamos ya con los ejemplos de .css(), primero vamos a ver cómo obtener el valor de una propiedad CSS y mostrarla por pantalla:

$(document).ready(function(){
    $("#boton").click(function(){
        alert("El color del texto es " + $("#parrafo").css("color"));
    });
});

$(document).ready(function(){

$("#boton").click(function(){

alert("El color del texto es " + $("#parrafo").css("color"));

});

Os explico el código superior:

Detectamos que se hace click en el elemento con id = ‘boton’, en este caso es un botón.
Sacamos un mensaje por pantalla mostrando el color de texto de un párrafo con id = ‘parrafo’.

El código HTML del botón y el párrafo es el siguiente:

<p id="parrafo" style="color:#FF0040;">Esto es un párrafo de texto de color rojo.</p>
<p><input type="button" id="boton" value="Clicka para obtener la propiedad"></p>

1 2	<p id="parrafo" style="color:#FF0040;">Esto es un párrafo de texto de color rojo.</p> <p><input type="button" id="boton" value="Clicka para obtener la propiedad"></p>

Ejemplo de jQuery CSS para cambiar o modificar el valor de una propiedad CSS

En este ejemplo de .css() vamos a ver cómo cambiar o modificar el valor de una propiedad CSS:

$(document).ready(function(){
    $("#boton").on("click",function(){
	    $("#parrafo").css("color", "#000000");
    });
});

$(document).ready(function(){

$("#boton").on("click",function(){

$("#parrafo").css("color", "#000000");

});

Os comento el código:

Detectamos que se hace click mediante la función on() en el elemento con id = ‘boton’, en este caso es un botón.
Se modifica el color del texto del párrafo con id = ‘parrafo’, el texto cambia a color negro.

El código HTML del botón y el párrafo es el siguiente:

<p id="parrafo" style="color:#FF0040;">Esto es un párrafo de texto de color rojo.</p>
<p><input type="button" id="boton" value="Clicka para cambiar la propiedad"></p>

1 2	<p id="parrafo" style="color:#FF0040;">Esto es un párrafo de texto de color rojo.</p> <p><input type="button" id="boton" value="Clicka para cambiar la propiedad"></p>