En este artículo, la tarea es alternar una clase CSS cuando se hace clic en ese elemento y eliminar esa clase en particular cuando se hace clic fuera de ese elemento, es decir, en cualquier otro lugar del documento HTML.
Enfoque: Esto se puede lograr fácilmente con la ayuda de JavaScript siguiendo los pasos a continuación:
- Primero seleccionaremos el elemento en el que se debe alternar la clase y todo el documento HTML usando el método querySelector().
- A continuación, debemos agregar los detectores de eventos ‘clic’ a ambos elementos seleccionados.
- En el detector de eventos del elemento en el que se debe hacer clic, agregaremos la clase CSS requerida usando el método classList.add().
- En el detector de eventos del documento HTML, primero verificaremos si el destino en el que se hizo clic es el elemento requerido anterior y luego eliminaremos la clase usando el método classList.remove(), alternando así la clase cuando se haga clic fuera del elemento anterior.
Ejemplo: En este ejemplo, se define un botón en el documento HTML en el que se agregaría la clase CSS ‘activa’ una vez que se haga clic en él. Esta clase ‘activa’ también se eliminará del botón una vez que hagamos clic en cualquier otro lugar del documento HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
button {
background-color: green;
color: white;
padding: 10px 24px;
font-size: 18px;
border: none;
font-weight: bold;
transition: all 0.4s;
margin: 300px;
}
.active {
background-color: black;
}
</style>
</head>
<body>
<button>GeeksforGeeks</button>
<script>
// Select the button on which the
// class has to be toggled
const btn = document.querySelector("button");
// Select the entire HTML document
const html = document.querySelector("html");
// Add an event listener for
// a click to the button
btn.addEventListener("click", function (e) {
// Add the required class
btn.classList.add("active");
});
// Add an event listener for a
// click to the html document
html.addEventListener("click", function (e) {
// If the element that is clicked on is
// not the button itself, then remove
// the class that was added earlier
if (e.target !== btn)
btn.classList.remove("active");
});
</script>
</body>
</html>
Producción:
