La propiedad classList es una propiedad de solo lectura. Esta propiedad utiliza la propiedad «classList.length» que devuelve los nombres de clase del elemento en forma de DOMTokenlist (conjunto de tokens separados por espacios). Sin embargo, esta propiedad es para agregar, eliminar y alternar clases CSS en un elemento.
NOTA: La propiedad classList no es compatible con IE9 y versiones anteriores.
Sintaxis:
const elementClasses = elementNodeReference.classList;
Método:
- add(class1, class2, …) : Agrega una clase más a un elemento. Si la clase anterior ya existe en el atributo de clase del elemento, se ignoran.
- remove(class1, class2, …) : Elimina la clase especificada del elemento. La clase que no existe no arroja un error.
- contiene (clase): comprueba si el valor de clase especificado existe en el atributo de clase del elemento. Devuelve el valor booleano correspondiente.
- item(index) : Esto devuelve el valor de la clase por índice en la colección de clases. Si el índice está fuera de rango, devuelve nulo.
- toggle(class, force) : Alterna entre un nombre de clase para un elemento.
- El primer parámetro elimina la clase especificada de un elemento y devuelve falso. Si la clase no existe, agrega clase al elemento y devuelve verdadero.
- El segundo parámetro opcional es un valor booleano que fuerza la adición o eliminación de la clase. Cuando un segundo parámetro está presente y se evalúa como verdadero, agrega el valor de clase especificado, y si se evalúa como falso, obliga a eliminar la clase especificada, ya sea que exista o no.
- El primer parámetro elimina la clase especificada de un elemento y devuelve falso. Si la clase no existe, agrega clase al elemento y devuelve verdadero.
Ejemplo-1: Agregar y eliminar una clase.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM classList Property
</title>
<style>
.mystyle {
align: center;
border: 1px solid black;
height: 100px;
padding-top: 35px;
background: lightgreen;
color: Black;
font-size: 70px;
}
</style>
</head>
<body>
<p>
Click the buttons to see the add and
remove of "mystyle" class to DIV.
</p>
<button onclick="myFunction()">
Add class
</button>
<div id="myDIV">
GeeksforGeeks
</div>
<script>
function myFunction() {
document.getElementById(
"myDIV").classList.add("mystyle");
}
function Remove() {
document.getElementById(
"myDIV").classList.remove("mystyle");
}
</script>
<button onclick="Remove()">Remove class</button>
</body>
</html>
Producción :
- Antes de agregar una clase
- Después de hacer clic en el botón Agregar clase
- Después de hacer clic en el botón Eliminar clase
Ejemplo-2: Alternar entre clases
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM classList Property
</title>
<style>
.mystyle {
align: center;
border: 1px solid black;
height: 100px;
padding-top: 35px;
background: lightgreen;
color: Black;
font-size: 70px;
}
.newClassName {
align: center;
border: 1px solid black;
height: 50px;
padding-top: 35px;
background: green;
color: white;
font-size: 50px;
}
</style>
</head>
<body>
<p>
Click the buttons to see the add and
remove of "mystyle" class to DIV.
</p>
<button onclick="myFunction()">
toggle
</button>
<div id="myDIV" class="mystyle">
GeeksforGeeks
</div>
<script>
function myFunction() {
document.getElementById(
"myDIV").classList.toggle("newClassName");
}
</script>
</body>
</html>
Producción :
- Antes de alternar
- Después de alternar
Ejemplo-3:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM classList Property
</title>
<style>
.mystyle {
width: 500px;
height: 50px;
}
.anotherClass {
background-color: lightGreen;
}
.thirdClass {
text-align: center;
font-size: 25px;
color: black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="myDIV" class="mystyle anotherClass thirdClass">
GeeksforGeeks
</div>
<button onclick="myFunction()">
click to count the classes
</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById(
"myDIV").classList.length;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Producción :
- antes de hacer clic
- Después de hacer clic
Navegador compatible: los navegadores compatibles con DOM classList Property se enumeran a continuación:
- Google Chrome 22.0 y superior
- Borde 16.0 y superior
- Internet Explorer 10.0 y superior
- Firefox 3.6 y superior
- Ópera 11.5 y superior
- Safari 7.0 y superior
Publicación traducida automáticamente
Artículo escrito por ashishsaini3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA