Element.classList tutorial
last modified August 24, 2023
Element.classList tutorial shows how to read and write attribute classes of an
element with classList property in JavaScript.
Element.classList
Element.classList is a read-only property that returns a collection
of the class attributes of an element. It is a convenient alternative to
accessing an element's list of classes as a space-delimited string via
element.className.
To insert the HTML into the document rather than replace the
contents of an element, we use the insertAdjacentHTML method.
Element.classList example
The following example demonstrates the usage of the elements's classList property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element.classList</title>
<link rel="stylesheet" href="main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
</head>
<body>
<div id="mydiv" class="initial">
</div>
<button id="pck">Pick</button>
<script src="main.js"></script>
</body>
</html>
In the document, we have a div element with a default initial class.
The Pick button picks randomly another class and puts it into div's list of classes.
It also outputs the current classes of the div.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
We include the Lodash library.
.initial { width: 200px; height: 100px; margin: 10px; padding:5px; border: 1px solid seagreen}
.steelblue { background-color: steelblue }
.lime { background-color: lime }
.olive { background-color: olive }
.sienna { background-color: sienna }
.silver { background-color: silver }
.skyblue { background-color: hsl(197, 71%, 73%) }
.teal { background-color: teal }
.khaki { background-color: khaki }
This is the main.css. We have some background styles which we
add or remove from the div.
const classes = ['steelblue', 'lime', 'olive', 'sienna',
'silver', 'skyblue', 'teal', 'khaki'];
let btnPck = document.getElementById('pck');
let btnLst = document.getElementById('lst');
let myDiv = document.getElementById('mydiv');
btnPck.addEventListener('click', () => {
const active = myDiv.classList;
active.forEach(col => {
if (_.includes(classes, col)) {
myDiv.classList.remove(col);
}
})
myDiv.classList.add(_.sample(classes));
myDiv.innerHTML = myDiv.classList;
});
Clicking on the button we apply a random style to the div element.
const classes = ['steelblue', 'lime', 'olive', 'sienna',
'silver', 'skyblue', 'teal', 'khaki'];
We have a list of styles.
const active = myDiv.classList;
We determine the active classes with classList property.
active.forEach(col => {
if (_.includes(classes, col)) {
myDiv.classList.remove(col);
}
})
We go throught the list of active classes and remove any class that is not
initial before adding a new one.
myDiv.classList.add(_.sample(classes));
We add a random class to the class list. We use Lodash's _.sample
function to pick a random element.
myDiv.innerHTML = myDiv.classList;
The active classes are displayed in the div element.
In this article we have worked with the element's classList property.