Cambiar la clase de un elemento HTML con JavaScript

1. Seleccione un elemento HTML en JavaScript
2. Cambiar todas las clases aplicables a un elemento en JavaScript
3. Insertar una clase adicional al elemento en JavaScript
4. Eliminar una clase en un elemento en JavaScript
5. Compruebe si una clase se ha utilizado en un elemento en JavaScript

Este artículo demuestra cómo cambiar la clase de un elemento HTML en respuesta a eventos de JavaScript.

Seleccione un elemento HTML en JavaScript

Indiscutiblemente, la forma más sencilla de seleccionar un elemento HTML en JavaScript es a través de document.getElementById().

Por ejemplo, si necesita seleccionar un elemento con la ID de clase Estudiantes, aquí le mostramos cómo seleccionarlo.

document.getElementById('Students')

Cambiar todas las clases aplicables a un elemento en JavaScript

Después de seleccionar el elemento usando su ID de clase, puede cambiar su clase o reemplazar todas sus clases, como se muestra arriba. Deberá establecer una nueva usando el atributo .className para reemplazar la clase anterior, como se muestra a continuación.

Document.getElementById('Fruits').classname = 'Veggies';

Insertar una clase adicional al elemento en JavaScript

También puede agregar una nueva clase a un elemento sin cambiar ninguna de las clases existentes. Puede hacer esto usando el operador += para agregar la nueva clase.

Por ejemplo,

Document.getElementById('Subjects').className += 'Physics';

Agrega una clase adicional llamada Física a otras clases en el elemento Temas.

Eliminar una clase en un elemento en JavaScript

Eliminar una sola clase en un elemento sin afectar a otras clases es un poco más complejo. Deberá utilizar .className.replace junto con la siguiente expresión regular.

?:^|\s)RemoveThis(?!\S)/g

• ?:^|\s captura el comienzo de una cadena y / o cualquier carácter de espacio en blanco utilizado.
• RemoveThis es el nombre de la clase que se eliminará.
• (?!\S) verifica que RemoveThis es un nombre de clase completo y comprueba si hay caracteres que no sean espacios al final. En otras palabras, asegura que la expresión regular se coloque al final de la cadena.
• g es la bandera que asegura que el comando de reemplazo se efectúa según sea necesario en todos los casos en los que se ha agregado la clase.

Vea el siguiente ejemplo.

document.getElementById('ElementOne').className =
    document.getElementById('ElementOne')
        .className.replace(/(?:^|\s)RemoveThis(?!\S)/g, '')

Compruebe si una clase se ha utilizado en un elemento en JavaScript

Para verificar si una clase se ha aplicado a un elemento específico, puede usar la expresión regular anterior. Esto se logra mejor usando un if(); declaración para dar un resultado. Por ejemplo:

if (document.getElementById('ElementOne')
        .className.match(/(?:^|\s)ClassOne(?!\S)/))
print('Class has been used.')

La salida será Se ha utilizado la clase si la comprobación es positiva, o no habrá salida si es negativa, a menos que se defina una acción o salida alternativa con la instrucción else.

No es recomendable escribir código JavaScript directamente en los atributos de eventos HTML. Podría dificultar la ejecución y ralentizar las aplicaciones. En su lugar, puede escribir JavaScript en una función, llamando a dicha función en un atributo onclick y luego moviendo el evento del código HTML a JavaScript. Puede lograr esto con el atributo .addEventListener().