Cómo cambiar la clase de un elemento en JavaScript?

JavaScript | Cambio de la class de un elemento : Aquí, vamos a aprender cómo cambiar la class de un elemento en JavaScript?

En este artículo, vamos a ver cómo cambiar la class de un elemento utilizando JavaScript? A través de clases HTML que puede agrupar ciertos elementos y el estilo de ellos colectivamente. dinámicamente cambiante clases a través de ofertas de JavaScript una gran experiencia de usuario en el lado del cliente.

Vamos a aprender cómo hacerlo a través de un ejemplo práctico,

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<style>
body {
background: black;
}
span {
font-weight: bolder;
}
.rule-yellow {
position: relative;
left: 200px;
}
ul {
font-size: 24px;
}
.to-do {
color: tomato;
}
</style>
<body>
<div class="container">
<h2 class="center white">Tasks</h2>
<h5 class="center white-text">Let's mark our tasks in progress, completed and yet to be touched</h5>
<br>
<br>
<br>
<p class="white-text">Remeber to follow the rules:</p>
<span style="color: tomato" class="left rule-red">Red for not yet started</span>
<span style="color:yellow" class="center rule-yellow">Yellow for under progress</span>
<span style="color: green" class="right rule-green">Green for completed</span>
<br>
<br>
<br>
<br>
<ul class="collection tasks white center">
<li class="collection-item to-do">Study for end semester</li>
<li class="collection-item to-do">Learn JavaScript on includehelp.com</li>
<li class="collection-item to-do">Take cooper for a walk</li>
<li class="collection-item to-do">Solve sudoku</li>
</ul>
</div>
</body>
<script>
</script>
</html>

salida

How to change the class of an element in JavaScript? - 4

Hemos creado un administrador de tareas muy ingenua en la que podemos marcar tareas como se ha hecho, no se han iniciado o bajo progreso cambiar el color de la fuente de esa tarea. Antes de empezar, quiero que tomar rápidamente un vistazo a los estilos que he escrito class esto,

.to-do{
color: tomato;
}

Se puede ver que esta class es establecer el color de la fuente de nuestras tareas como el rojo class responsable. Esto también indica que no hemos empezado la tarea todavía. Vamos a añadir dos clases más que marcarán el color de fuente a class amarillo y verde marcándolos como en progreso y completado respectivamente.

.in-progress {
color: yellow;
}
.completed {
color: green;
}

Grande. Ahora hemos terminado. Lo siguiente que necesitamos es una referencia a nuestra lista,

<script>
const tasks=document.querySelectorAll('.tasks li');
console.log(tasks);
</script>

salida

NodeList(4) [li.collection-item.to-do, li.collection-item.to-do, li.collection-item.to-do, li.collection-item.to-do]
0: li.collection-item.to-do
1: li.collection-item.to-do
2: li.collection-item.to-do
3: li.collection-item.to-do
length: 4

Ahora podemos acceder al li del individuo a través de su índice. Digamos que haya terminado de estudiar sus class sems finales. Tenemos que conseguir nuestro primer li y cambiar su nombre de tareas Para completado.

tasks[0].classList.add('completed').remove('to-do');

salida

How to change the class of an element in JavaScript? - 5

Nuestra primera tarea está marcada como completada! Frio. Ya que siempre está aprendiendo JS vamos a marcar la segunda tarea como en progreso.

tasks[1].classList.add('in-progress').remove('to-do');

salida

How to change the class of an element in JavaScript? - 6

Lo que estamos haciendo es la adición de la nueva for y la eliminación de la antigua class y en esencia estamos cambiando la for!

También podemos utilizar el de palanca () método para agregar o eliminar for que si no existe. Digamos que usted ha resuelto el sudoku de modo marcarla como terminada,

<li class="collection-item completed">Solve sudoku</li>

salida

How to change the class of an element in JavaScript? - 7

Vaya, lo resolvió mal! Podemos volver a agregarlo a la lista de tareas alternando el for completado,

tasks[3].classList.toggle('completed');

salida

How to change the class of an element in JavaScript? - 8

Así, hemos implementado una funcionalidad fácil con sólo cambiar las clases CSS a través de JavaScript. Puede ampliar esta funcionalidad mediante la adición de detectores de eventos, que cuando se activa el cambio de estas clases class los elementos que se han hecho clic en. Suena como una idea class un gran proyecto JavaScript!


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *