Alternar la clase significa que si no hay un nombre de clase asignado al elemento, entonces se le puede asignar un nombre de clase dinámicamente o si una clase determinada ya está presente, entonces se puede eliminar dinámicamente simplemente usando el interruptor() o usando métodos contains(), add(), remove() del objeto DOMTokenList dentro de JavaScript.
Propiedades de los elementos HTML que se utilizan:
- classList: esta propiedad devuelve los nombres de clase del elemento como un objeto DOMTokenList. Este objeto tiene algunos métodos bien conocidos que incluyen contains(), add(), remove(), toggle() .
- contiene(): este método devuelve un valor booleano que indica si un nombre de clase en particular está presente o no.
- add(): este método se usa para agregar uno o más nombres de clase a un elemento.
- remove(): este método se utiliza para eliminar uno o más nombres de clase de un elemento.
- toggle(): este método pertenece al objeto DOMTokenList y se usa para alternar entre las clases
Método 1: Usando el método toggle() : Primero hagamos una plantilla del archivo HTML que incluya una etiqueta de párrafo y una etiqueta de botón. Después de eso, apliquemos un poco de estilo para la clase que se alternará. En nuestro ejemplo, el nombre de la clase es «paragraphClass» y el ID del botón es «Button». Copie este código dentro del <head> de la página html.
<style>
.paragraphClass {
font-size: 30px;
color: red;
}
#Button {
margin-top: 15px;
}
</style>
Ahora, escribamos el script para alternar la clase. El siguiente es el script, que debe escribirse dentro de <head> de la página html. En este método, usaremos la función toggle() para alternar los nombres de las clases.
<script>
function myFunc() {
var para = document.getElementById("p");
para.classList.toggle("paragraphClass");
}
</script>
Ejemplo: Vayamos al ejemplo de trabajo combinando todos los conceptos descritos anteriormente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geeks for Geeks</title>
<style>
.paragraphClass {
font-size: 30px;
color: red;
}
#Button {
margin-top: 15px;
}
</style>
<script>
function myFunc() {
var para = document.getElementById("p");
para.classList.toggle("paragraphClass");
}
</script>
</head>
<body>
<p id="p">
Click on the button to toggle
between the class to see the
effects
</p>
<button id="Button" onclick="myFunc()">
Click Me
</button>
</body>
</html>
Producción:
- Sin hacer clic en el botón:
- Después de hacer clic en el botón una vez:
- Después de hacer clic en el botón dos veces:
Método 2: Usando el método contains(), add() y remove() : Primero hagamos una plantilla del archivo HTML que incluya una etiqueta de párrafo y una etiqueta de botón. Después de eso, apliquemos un poco de estilo para la clase que se alternará. En nuestro ejemplo, el nombre de la clase es «paragraphClass» y el ID del botón es «Button». Copie este código dentro del <head> de la página html.
<style>
.paragraphClass {
font-size: 30px;
color: red;
}
#Button {
margin-top: 15px;
}
</style>
Ahora, escribamos el script para alternar la clase. El siguiente es el script, que debe escribirse dentro del <head> de la página html. En este método, usaremos el método contains(), add(), remove() para alternar los nombres de las clases. El truco aquí es que verificaremos si una clase en particular está presente o no usando el método contains() , y luego agregaremos o eliminaremos los nombres de clase del elemento usando add() o remove() respectivamente.
<script>
function myFunc() {
var para = document.getElementById("p");
if(para.classList.contains("paragraphClass")) {
para.classList.remove("paragraphClass");
}
else {
para.classList.add("paragraphClass");
}
}
</script>
Ejemplo: Vayamos al ejemplo de trabajo combinando todos los conceptos descritos anteriormente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geeks for Geeks</title>
<style>
.paragraphClass {
font-size: 30px;
color: red;
}
#Button {
margin-top: 15px;
}
</style>
<script>
function myFunc() {
var para = document.getElementById("p");
if(para.classList.contains("paragraphClass")) {
para.classList.remove("paragraphClass");
}
else {
para.classList.add("paragraphClass");
}
}
</script>
</head>
<body>
<p id="p">
Click on the button to toggle
between the class to see the
effects
</p>
<button id="Button" onclick="myFunc()">
Click Me
</button>
</body>
</html>
Producción:
- Sin hacer clic en el botón:
- Después de hacer clic en el botón una vez:
- Después de hacer clic en el botón dos veces:
Publicación traducida automáticamente
Artículo escrito por AnasShamoon y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA