Los últimos tutoriales de desarrollo web
 

HTML DOM className Propery

<Elemento de objeto

Ejemplo

Establecer la clase de un <div> elemento con id = "myDiv":

document.getElementById("myDIV").className = "mystyle";
Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.

Definición y Uso

Los conjuntos de propiedades className o devuelve el nombre de la clase de un elemento (el valor del atributo de clase de un elemento).

Consejo: Una propiedad similar a className es la classList propiedad.

Soporte del navegador

Propiedad
className Sí Sí Sí Sí Sí

Sintaxis

Devolver la propiedad Nombre de clase:

HTMLElementObject .className

Establecer la propiedad Nombre de clase:

HTMLElementObject .className= class

Valores de propiedad

Valor Descripción
class Especifica el nombre de la clase de un elemento. Para aplicar varias clases, separarlos con espacios, como "test demo"

Detalles técnicos

Valor de retorno: Una cadena, que representa la clase, o una lista separada por espacios de las clases, de un elemento
Ejemplos

Más ejemplos

Ejemplo

Obtener el nombre de la clase del primer <div> elemento en el documento (if any) :

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

El resultado de x será:

mystyle
Inténtalo tú mismo "

Ejemplo

Otros ejemplos sobre la forma de obtener el nombre de la clase de un elemento:

var x = document.getElementsByClassName("mystyle")[0].className;
var y = document.getElementById("myDIV").className;
Inténtalo tú mismo "

Ejemplo

Obtener los nombres de clase de un elemento con múltiples clases:

<div id="myDIV" class="mystyle test example">I am a DIV element</div>

var x = document.getElementById("myDIV").className;

El resultado de x será:

mystyle text example
Inténtalo tú mismo "

Ejemplo

Sobrescribir un nombre de clase existente por uno nuevo:

<div id="myDIV" class="mystyle">I am a DIV element</div>

document.getElementById("myDIV").className = "newClassName";
Inténtalo tú mismo "

Ejemplo

Para agregar una clase a un elemento, sin sobrescribir los valores existentes, insertar un espacio y el nuevo nombre de la clase:

document.getElementById("myDIV").className += " anotherClass";
Inténtalo tú mismo "

Ejemplo

Si hay una clase de "mystyle" en un elemento con id = "myDiv", cambiar su tamaño de fuente:

var x = document.getElementById("myDIV");

if (x.className === "mystyle") {
    x.style.fontSize = "30px";
}
Inténtalo tú mismo "

Ejemplo

Alternar entre nombres de clase en diferentes posiciones de desplazamiento - Cuando el usuario se desplaza hacia abajo 50 píxeles desde la parte superior, el nombre de clase "test" se añadirán a un elemento (and removed when scrolled up again) .

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 50) {
        document.getElementById("myP").className = "test";
    } else {
        document.getElementById("myP").className = "";
    }
}
Inténtalo tú mismo "

Páginas relacionadas

Tutorial CSS: CSS Selectores

CSS Referencia: CSS Selector .class

HTML DOM Referencia: HTML DOM classList Property

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

HTML DOM Referencia: DOM Estilo HTML Objeto

<Elemento de objeto