Nombre de clase del elemento HTML DOM
❮ El Objeto ElementoEjemplo
Establezca el atributo de clase para un elemento:
element.className = "myStyle";
Obtenga el atributo de clase de "myDIV":
let value = document.getElementById("myDIV").className;
Alternar entre dos nombres de clase:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
Más ejemplos a continuación.
Definición y uso
La classNamepropiedad establece o devuelve el atributo de clase de un elemento.
Sintaxis
Devuelve la propiedad className:
HTMLElementObject.className
Establezca la propiedad className:
HTMLElementObject.className = class
Valores de propiedad
| Value | Description |
| class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
Valor devuelto
| Type | Description |
| String | The class, or a space-separated list of classes, of an element |
Más ejemplos
Obtenga el atributo de clase del primer elemento <div> (si corresponde):
let value = document.getElementsByTagName("div")[0].className;
Obtenga un atributo de clase con varias clases:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
Sobrescriba un atributo de clase existente con uno nuevo:
element.className = "newClassName";
Para agregar nuevas clases, sin sobrescribir los valores existentes, agregue un espacio y las nuevas clases:
element.className += " class1 class2";
si "myDIV" tiene una clase "myStyle", cambie el tamaño de fuente:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
Si se desplaza 50 píxeles desde la parte superior de esta página, se agrega la clase "prueba":
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Compatibilidad con navegador
element.className es compatible con todos los navegadores:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |
❮ El Objeto Elemento