Propiedad className del HTML DOM

Objeto Elemento DOM HTML

classNameEl atributo establece o devuelve el valor de la propiedad class del elemento especificado como una cadena.

Si el elemento especificado no tiene la propiedad de clase o no se ha configurado la propiedad de clase, se devuelve unnullCadena.

Sintaxis:

Devolver la propiedad className:

element.className

Establecer la propiedad className:

element.className = cName

document.getElementById("x").className = "para";

Compatibilidad del navegador

Todos los navegadores soportan completamente la propiedad className:

Valor del atributo

Detalles técnicos

Más ejemplos

Devuelve el nombre de la clase del primer elemento <div>:

var x = document.getElementsByTagName("div")[0].className;

Sobrescribir el nombre de la clase existente con un nuevo nombre:

<div class="myDiv">Este es un elemento DIV</div>
script>
var x = document.getElementsByTagName("div")[0];
x.className = "anotherClass";
</script>

Para agregar una clase al elemento sin sobrescribir el valor existente, inserte un espacio y el nombre de la nueva clase:

<div class="myDiv">Este es un elemento DIV</div>
script>
var x = document.getElementsByTagName("div")[0];
x.className　+= " anotherClass";
</script>

Encontrar si el elemento <div> tiene la clase "shadow":

var x = document.getElementsByTagName("div")[0];
if (x.className.indexOf("shadow") !=　-1) {
　　　alert("Yes... The DIV has 'shadow' class");
}
　　　alert("False");
}

Referencias relacionadas

Tutoriales de CSS:Selector de CSS

Referencia de CSS:CSS #idSelector

Referencia de CSS: CSS .class Selector

Referencia de JavaScript:Método indexOf() de String

Referencia de DOM HTML:Atributo classList de DOM HTML

Referencia de DOM HTML:Método getElementsByClassName() de DOM HTML

Referencia de DOM HTML:Método getElementById() de DOM HTML

Referencia de DOM HTML:Método querySelector() de DOM HTML

Objeto Elemento DOM HTML