JQuery es una biblioteca de JavaScript ligera y divertida que le permite manipular CSS de muchas maneras diferentes a través del uso de varios métodos jQuery. Usando estos métodos, puede establecer las propiedades de estilo de los elementos, o puede agregar o eliminar un nombre de clase determinado de un elemento, o tal vez alternar entre agregar o eliminar clases.

Los métodos jQuery mencionados a continuación se utilizan para manipular CSS .

1. Método CSS ()
2. método addClass ()
3. Método de HaSclass ()
4. Método de removeclass ()
5. método toggleclass ()

Explorarlos en detalle.

Método CSS ()

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

Sintaxis

css ("propiedad", "valor"); // para establecer una propiedad CSS
css ("propiedad"); // para obtener una propiedad CSS

Ejemplo 1

Supongamos que desea establecer el color de fondo de un elemento utilizando el método CSS () en jQuery.

Html

Este es un párrafo

Establecer el color de fondo de Div

En el código anterior, tres elementos HTML que están ,

, y se están creando.

jQuery

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

Usando el método CSS () estamos cambiando el color de fondo del elemento solo con el clic del botón.

Producción

El color de fondo del div se ha establecido.

Ejemplo 2

Supongamos que solo desea extraer una propiedad de estilo de un elemento HTML. Use el siguiente código.

Html

Algún párrafo.

Devolver el tamaño de la fuente de P

En el código anterior,

, y se han creado elementos, además, el

El elemento ha recibido un tamaño de fuente de 25px.

jQuery

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
alerta ("font size =" + $ ("p").CSS ("Font-Size"));
);
);

Estamos utilizando el método CSS () para obtener el tamaño de fuente del párrafo. Una vez que haga clic en el botón, aparecerá un mensaje de alerta que muestra el tamaño de fuente del párrafo.

Producción

Antes de hacer clic en el botón.

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

Se ha extraído el tamaño de fuente del párrafo.

método addClass ()

Como su nombre indica, el método jQuery addclass () se usa para agregar nombres de clases individuales o múltiples a un elemento HTML.

Sintaxis

$ (selector).addClass (className, Funcname (index, currentClass))

Nota: El nombre de la clase es un parámetro requerido que indica el nombre de clase que se agregará y el nombre de función es un parámetro opcional que especifica una función para obtener un nombre de clase que se agregará.

Ejemplo

Supongamos que ha definido un elemento similar más de una vez en una página web y desea agregar una clase a solo uno de esos elementos. Use el siguiente código.

Html

Primer párrafo.

Ultimo parrafo.

Agregue un nombre de clase al último párrafo

En el código anterior, hemos creado dos

Etiquetas y un elemento.

CSS

.nota
tamaño de fuente: 160%;
color azul;

Aquí hemos definido algún estilo para una "nota" de clase.

jQuery

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("P: Last").addClass ("nota");
);
);

En el código anterior, se agrega una clase con el nombre "Nota" al último

elemento. Por lo tanto, al hacer clic en el botón, el estilo definido para la clase de notas se aplicará al último párrafo.

Producción

La clase "nota" se ha agregado con éxito al último párrafo.

Método de HaSclass ()

Con el fin de evaluar si un elemento tiene una clase o no, se utiliza el método HaSclass (). Este método muestra verdadero si detecta cualquier clase o de otra manera falso.

Sintaxis

$ (selector).Hasclass (nombre de clase)

Nota: El nombre de la clase es un parámetro requerido que se utiliza para especificar un nombre de clase para buscar.

Ejemplo

Supongamos que desea verificar si hay alguna clase aplicada a un cierto conjunto de elementos similares. Así es como lo haces.

Html

Un párrafo.

Otro párrafo.

¿Cualquier elemento P tiene clase "principal"??

En este código HTML, creamos dos

elementos y un elemento. Además de esto, el primero

El elemento ha sido asignado a la clase "principal".

jQuery

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
alerta ($ ("P").Hasclass ("principal"));
);
);

En el código anterior, se ha diseñado un mensaje de alerta que devolverá verdadero cuando el método HaSclass () detecte una clase con el nombre de "Main".

Producción

El método HaSclass () funciona correctamente.

Método de removeclass ()

Con el fin de eliminar un solo o múltiples nombres de clase de los elementos HTML, se utiliza el método RemoveClass ().

Sintaxis

$ (selector).RemoVeCLass (className, FuncName (index, currentClass))

Nota: El nombre de la clase El parámetro especifica el nombre de clase que se eliminará y el nombre de función El parámetro especifica una función que obtiene nombres de clases simples o múltiples a eliminar. Ambos son parámetros opcionales.

Ejemplo

Supongamos que desea eliminar una clase de cierto elemento HTML. Use el código a continuación.

Html

Encabezado 1

Encabezado 2

Encabezado 3

Retire la clase "Cabeza" del elemento H1.

Hemos creado cuatro elementos HTML que son

,

,

, y . Además, hemos aplicado una clase "cabeza" a la

elemento.

CSS

.cabeza
Opacidad: 0.4;

La cabeza de clase ha recibido algún estilo a través de CSS.

jQuery

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("H1").RemoveClass ("Cabeza");
);
);

En el código anterior, removeClass () se ha aplicado para eliminar la clase de "cabeza" de

elemento.

Producción

La clase de "cabeza" ha sido retirada de la

elemento.

método toggleclass ()

Este método cambia entre agregar o eliminar nombres de clase simples o múltiples de los elementos HTML. Funciona de manera que agrega nombre (s) de clase a aquellos elementos donde falta y elimina los nombres de la clase de aquellos elementos donde ya se han establecido.

Sintaxis

$ (selector).toggleclass (className, Funcname (index, currentClass), toggle)

En la sintaxis anterior:

• El nombre de la clase es un parámetro requerido que se utiliza para especificar un nombre de clase para agregar o eliminar de un elemento.
• El nombre de función Parámetro especificar una función que obtiene un nombre de clase a agregar o eliminar.
• Por otro lado, el palanca El parámetro es un booleano Valor que indica si se debe agregar el nombre de clase A (verdadero) o eliminado (falso).

Ambos FunCname y alternar son parámetros opcionales.

Ejemplo

Supongamos que desea alternar un nombre de clase entre múltiples elementos HTML. Sigue el código a continuación.

Html

Encabezado 1

Encabezado 2

Encabezado 3

Palanca

Se están creando cuatro elementos HTML que están

,

,

, y .

CSS

.cabeza
color azul;
Opacidad: 0.3;

Usando CSS, una clase con el nombre de "cabeza" ha recibido algún estilo.

jQuery

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("H1, H2, H3").toggleclass ("cabeza");
);
);

En el código anterior, la clase "Cabeza" se alterna entre

,

, y

elementos.

Producción

Debe hacer clic en el botón varias veces para ver el efecto de alternativa.

La clase de alternativa funciona correctamente.

Conclusión

CSS se puede manipular mediante el uso de varios métodos jQuery que son; El método css () se aplica o obtiene una o más propiedades de estilo de un elemento, el método addclass () agrega nombres de clases a los elementos, el Hasclass () detecta si un elemento tiene una clase o no, el removeclass () elimina los nombres de clases de elementos, y los interruptores de toggleclass () entre agregar o eliminar los nombres de clase de los elementos. Estos métodos se explican en detalle con la ayuda de ejemplos relevantes.