jQuery tiene varios métodos para la manipulación de CSS que se enumeran a continuación:
- addClass(): Agrega una o más clases a los elementos seleccionados
- removeClass(): elimina una o más clases de los elementos seleccionados
- toggleClass(): alterna entre agregar o eliminar clases de elementos seleccionados
- css(): establece o devuelve el atributo de estilo
- Método jQuery addClass(): AddClass se usa para agregar más propiedades a cada elemento seleccionado. También se puede utilizar para cambiar la propiedad del elemento seleccionado.
Sintaxis:
$(content).addClass(target)
Ejemplo:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
jQuery addClass() Method
</
title
>
<
script
src
=
</
script
>
<!-- Script to use addClass method -->
<
script
>
$(document).ready(function() {
$("button").click(function() {
$("h1, h2, p").addClass("green");
$("div").addClass("abs");
});
});
</
script
>
<
style
>
.abs {
font-weight: bold;
font-size: xx-large;
}
.green {
color:green;
}
</
style
>
</
head
>
<
body
>
<
h1
>GFG</
h1
>
<
h2
>GeeksForGeeks</
h2
>
<
p
>This is gfg.</
p
>
<
div
>This is some different text.</
div
><
br
>
<
button
>Add classes to elements</
button
>
</
body
>
</
html
>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- Antes de hacer clic en el botón:
- Método jQuery removeClass(): este método se utiliza para eliminar un atributo de clase específico de diferentes elementos.
Sintaxis:
$(content).removeClass(target)
Ejemplo:
<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
</
script
>
<!-- Script to use removeClass method -->
<
script
>
$(document).ready(function() {
$("button").click(function() {
$("h1, h2, p").removeClass("green");
});
});
</
script
>
<
style
>
.important {
font-weight: bold;
font-size: xx-large;
}
.green {
color:green;
}
</
style
>
</
head
>
<
body
>
<
h1
class
=
"green"
>Heading 1</
h1
>
<
h2
class
=
"green"
>GFG</
h2
>
<
p
class
=
"green"
>welcome to GeeksForGeeks.</
p
>
<
p
>This is other paragraph.</
p
>
<
button
>Remove class from elements</
button
>
</
body
>
</
html
>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- Antes de hacer clic en el botón:
- Método jQuery toggleClass(): este método alterna entre agregar o eliminar clases de los elementos seleccionados.
Sintaxis:
$(content).toggleClass(target)
Ejemplo:
<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
</
script
>
<!-- Script to use toggleClass() method -->
<
script
>
$(document).ready(function() {
$("button").click(function() {
$("h1, h2, p").toggleClass("green");
});
});
</
script
>
<
style
>
.green {
color:lightgreen;
}
</
style
>
</
head
>
<
body
>
<
h1
>Heading</
h1
>
<
h2
>gfg</
h2
>
<
p
>welcome to gfg</
p
>
<
p
>This is other paragraph.</
p
>
<
button
>Toggle class</
button
>
</
body
>
</
html
>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- Antes de hacer clic en el botón:
- Método jQuery css(): este método establece o devuelve una o más propiedades de estilo para los elementos seleccionados.
Sintaxis:$(content).css(target)
Ejemplo:
<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
</
script
>
<!-- Script to use css() method -->
<
script
>
$(document).ready(function() {
$("button").click(function() {
alert("Background color = "
+ $("p").css("background-color"));
});
});
</
script
>
</
head
>
<
body
>
<
h2
>This is a heading</
h2
>
<
p
style
=
"background-color:green;"
>This is a gfg.</
p
>
<
p
style
=
"background-color:lightgreen"
>This is a gfg.</
p
>
<
p
style
=
"background-color:blue"
>This is a gfg.</
p
>
<
button
>background-color of p</
button
>
</
body
>
</
html
>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- Antes de hacer clic en el botón: