JavaScript Agregar clase a elemento
Este tutorial discutirá cómo agregar una clase a un elemento dado usando la propiedad classList en JavaScript.
Agregar una clase a un elemento dado usando la propiedad classList en JavaScript
Si desea agregar una clase a un elemento dado en JavaScript, puede usar la propiedad classList. Primero, debe obtener el elemento dado, y la forma más fácil de hacerlo es obtenerlo usando su id. Supongamos que no se le da un id al elemento; en ese caso, puede darle un id único y obtener el elemento usando la propiedad getElementById en JavaScript y almacenarlo en una variable. Después de eso, puede usar la variable para cambiar su propiedad usando la propiedad classList. Por ejemplo, cambiemos la clase de un texto usando un botón. Vea el código a continuación.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.newclass {
width: 90%;
padding: 30px;
background-color: red;
color: yellow;
font-size: 30px;
}
</style>
<body>
<button onclick="myFun()">Try it</button>
<div id="test">
Adding Class Test
</div>
<script type="text/javascript">
function myFun() {
var ob = document.getElementById("test");
ob.classList.add("newclass");
}
</script>
</body>
</html>
En el código anterior, tenemos una etiqueta de estilo en la que configuramos las propiedades de un objeto de clase; dentro de la etiqueta del cuerpo, tenemos un botón y algo de texto, y dentro de la etiqueta del script, estamos cambiando la clase del texto usando su id. En este ejemplo, la hoja de estilo y el código JavaScript se colocan dentro del mismo archivo HTML, pero también puede colocarlos en archivos separados y vincularlos al archivo HTML. Para ejecutar el código anterior, debe copiar el código en un archivo HTML y abrirlo con un navegador.
Producción:
Como puede ver en la salida, hay un botón y algo de texto. Cuando presione este botón, se cambiará la clase del texto.
Salida cuando se presiona el botón:
Como puede ver en la salida, la forma del texto cambia debido al cambio en la clase. En este ejemplo, estamos usando un botón para cambiar la clase de un elemento, pero puede cambiar la condición en la que desea cambiar la clase de un elemento dado. No puede usar la propiedad classList en Internet Explorer 9. En su lugar, puede usar el operador += para agregar la propiedad a un elemento dado. Tienes que cambiar la última línea de la función myFun dentro de la etiqueta de script con la línea de abajo.
ob.className += " newclass";
Tienes que usar un espacio antes del nombre de la clase porque tal vez haya otras clases presentes.
