El atributo de clase se puede utilizar en CSS para realizar algunas tareas para los elementos con el nombre de clase correspondiente. En este artículo, analizamos cómo agregar una clase a un elemento usando JavaScript. En javascript , existen algunos métodos para agregar una clase a un elemento. Podemos usar el .nombre de la clase propiedad o la .agregar() método para agregar un nombre de clase al elemento particular.
Ahora, analicemos los enfoques para agregar una clase a un elemento.
Usando la propiedad .className
El .nombre de la clase La propiedad establece el nombre de clase de un elemento. Esta propiedad se puede utilizar para devolver el valor del atributo de clase de un elemento. Podemos usar esta propiedad para agregar una clase a un elemento HTML sin reemplazar su clase existente.
Para agregar varias clases, tenemos que separar su nombre con espacios como 'clase1 clase2' .
Si una clase ya está declarada para un elemento y necesitamos agregar un nuevo nombre de clase al mismo elemento, entonces debe declararse insertando un espacio antes de escribir el nuevo nombre de clase; de lo contrario, sobrescribirá el nombre de clase existente. Se puede escribir de la siguiente manera:
document.getElementById('div1').className = ' newClass';
En el código anterior, hemos insertado un espacio antes Nueva clase .
Sintaxis
A continuación se proporciona la sintaxis comúnmente utilizada de esta propiedad para establecer o devolver el nombre de la clase.
Para establecer el nombre de la clase
element.className = class
Para devolver el nombre de la clase
element.className
El ejemplo de uso del .nombre de la clase La propiedad se da de la siguiente manera.
Ejemplo: agregar el nombre de la clase
En este ejemplo, estamos usando el .nombre de la clase propiedad para agregar el 'para' clase al elemento de párrafo que tiene id 'p1' . Estamos aplicando el CSS al párrafo correspondiente usando el nombre de la clase. 'para' .
Tenemos que hacer clic en el dado. botón HTML 'Agregar clase' para ver el efecto.
add class name using JavaScript .para { font-size: 30px; background-color: yellow; color: blue; border: 2px dotted red; } <p id="p1"> Welcome to the javaTpoint.com </p> <p> Click the following button to see the effect. </p> Add Class function fun() { var a = document.getElementById('p1'); a.classList.add('para'); } Pruébalo ahora Producción
Después de hacer clic en el botón indicado, el resultado será:
