Dado que todos sabemos que podemos realizar muchas tareas divertidas usando jQuery debido a su agenda liviana y "escribir menos, hacer más". Una de esas tareas es hacer cambios en las propiedades de estilo CSS de los elementos HTML. Puede cambiar CSS usando el CSS () Método de jQuery.

Aquí en esta guía, hemos explicado este método en detalle, además, hemos demostrado diferentes ejemplos que lo ayudan a comprender mejor el método y su uso.

Método CSS ()

El método CSS () en jQuery se utiliza con el fin de obtener o aplicar una o más propiedades de estilo a un elemento HTML.

Sintaxis

Para aplicar una propiedad CSS.

css ("propiedad", "valor");

Para buscar una propiedad CSS.

css ("propiedad");

Para aplicar múltiples propiedades CSS.

css ("propiedad": "valor", "propiedad": "valor" ...);

Para comprender mejor el método css (), exploremos algunos ejemplos.

Ejemplo 1: Cómo establecer una propiedad CSS

Supongamos que desea establecer el color de fondo de un

elemento usando el método css () en jQuery.

Html

Establecer una propiedad CSS

Establecer el color de fondo de H1

En el código HTML anterior, hemos creado un

, y un elemento.

jQuery

$ (documento).Ready (function ()
ps.botón").hacer clic (function ()
$ ("H1").CSS ("Color de fondo", "Amarillo");
);
);

En el código jQuery anterior, hemos aplicado un color de fondo amarillo al

elemento usando el método css ().

Producción

Antes de hacer clic en el botón.

Después de hacer clic en el botón.

El color de fondo del encabezado se ha establecido con éxito.

Cómo buscar una propiedad CSS

Supongamos que desea obtener cualquier propiedad CSS de un elemento, por ejemplo, el color de fondo de un elemento div. Sigue el código a continuación.

Html

Hola Mundo

Devolver el color de fondo de Div

Aquí hemos creado un y un elemento.

jQuery

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
alerta ("Color de fondo =" + $ ("Div").CSS ("Color de fondo"));
);
);

En el código anterior, el método css () se usa solo para extraer el color de fondo asignado al elemento. Además, se ha creado un mensaje de alerta que mostrará el color de fondo del div.

Producción

El color de fondo del elemento div se ha obtenido y se ha mostrado con éxito.

Cómo establecer múltiples propiedades CSS

Supongamos que desea asignar múltiples propiedades de estilo a cualquier elemento HTML a la vez. Sigue el ejemplo a continuación.

Html

Algún párrafo.

Establecer múltiples estilos

En el código anterior, hemos creado un

elemento junto con un elemento.

jQuery

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("P").CSS ("Color de fondo": "amarillo", "relleno": "25px", "ancho": "200px");
);
);

Usando el método jQuery css () hemos aplicado un color de fondo al

elemento y lo asignó algo de acolchado y ancho.

Producción

Se puede verificar de la salida anterior que se aplican múltiples estilos al párrafo de una vez.

Conclusión

Puede cambiar CSS utilizando el método jQuery CSS () que se utiliza con el fin de obtener o establecer propiedades de estilo de un elemento. Usando este método, puede aplicar múltiples estilos a un HTML a la vez manipulando las propiedades de estilo CSS. Este tutorial lo guía sobre cómo cambiar CSS de varias maneras a través del método jQuery CSS () junto con los ejemplos relevantes para una mejor comprensión.