Lista de clases de elementos HTML DOM
❮ Objeto ElementoEjemplo
Agregue una clase "myStyle" a un elemento:
element.classList.add("myStyle");
Elimina la clase "myStyle" de un elemento:
element.classList.remove("myStyle");
Alternar entre dos clases para un elemento:
element.classList.toggle("newStyle");
Más ejemplos a continuación.
Definición y uso
La classList
propiedad devuelve los nombres de clase CSS de un elemento.
La classList
propiedad devuelve un objeto DOMTokenList.
La classList
propiedad es de solo lectura, pero puede usar los métodos add() y remove() para agregar o eliminar clases CSS.
Nota
La classList
propiedad es útil para agregar, eliminar y alternar clases CSS en un elemento.
Ver también:
La propiedad className del elemento
Sintaxis
element.classList
Valores de propiedad
Value | Description |
length | The number of classes in the list. This property is read-only. |
Métodos
Method | Description |
add(class1, class2, ...) |
Adds one or more classes. |
contains(class) |
Returns true if an element has the class, otherwise false .
|
item(index) | Returns the class name with a specified index. Index starts at 0. Returns null if the index is out of range. |
remove(class1, class2, ...) | Removes one or more classes from an element. Removing a class that does not exist, does NOT throw an error. |
toggle(class, true|false) | Toggles between a class for an element. It removes the class and returns false .If the class does not exist, it adds the class and returns true .The optional second parameter is a boolean that forces the class to be added or removed, regardless of whether or not it already exists. The second parameter is not supported in Internet Explorer 11 or earlier. |
Valor devuelto
Type | Description |
Object | A DOMTokenList. A list of the class names of an element. |
Más ejemplos
Agregue múltiples clases a un elemento:
element.classList.add("myStyle", "anotherClass", "thirdClass");
Eliminar varias clases de un elemento:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
Cuántos nombres de clase tiene el elemento:
let numb = element.classList.length;
Obtenga los nombres de clase del elemento "myDIV":
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;
Obtener la primera clase de un elemento:
let className = element.classList.item(0);
¿Un elemento tiene una clase "myStyle"?
let x = element.classList.contains("myStyle");
Elimina "anotherClass" si un elemento tiene una clase "myStyle".
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
Alterne entre clases para crear un botón desplegable:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Cree una barra de navegación pegajosa:
// Get the navbar
var navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Compatibilidad con navegador
element.classList
es compatible con todos los navegadores:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 10-11 | Yes | Yes | Yes | Yes |
❮ El Objeto Elemento