En este artículo, veremos cómo agregar o quitar las clases CSS a un elemento usando jQuery. Para agregar las clases CSS a un elemento, usamos el método addClass() , y para eliminar las clases CSS usamos el método removeClass() .
Sintaxis:
-
La sintaxis para agregar clases CSS a un elemento:
$('selector').addClass(class_name); -
La sintaxis para eliminar clases CSS de un elemento:
$('selector').removeClass(class_name);
Ejemplo: en este ejemplo, primero creamos un elemento de imagen y dos botones, el primer botón para agregar clases de CSS y el segundo botón para eliminar clases de CSS. Cuando los usuarios hacen clic en el primer botón, se llama al método addClass() y la clase se agrega al elemento de imagen. Cuando el usuario hace clic en el segundo botón, se llama al método removeClass() y la clase se elimina del elemento de imagen.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<!-- Including jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
button {
padding: 5px 15px;
background-color: green;
color: white;
}
.bg-black {
background-color: black;
}
</style>
</head>
<body style="text-align: center">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>
How to add and remove CSS classes
to an element using jQuery?
</h3>
<div id="GFG_IMAGE">
<img src=
"https://write.geeksforgeeks.org/static/media/Group%20210.08204759.svg"
height="200px" width="250px" />
</div>
<br />
<button id="addCls">
Add CSS Class
</button>
<button id="removeCls">
Remove CSS Class
</button>
<script>
$(document).ready(function () {
$("#addCls").click(function () {
$("img").addClass("bg-black");
});
$("#removeCls").click(function () {
$("img").removeClass("bg-black");
});
});
</script>
</body>
</html>
Producción:
