Ebooks

Element.classList tutorial

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.

index.html
<!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.

main.css
.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.

main.js
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 tutorial, we have worked with the element's classList property.

You might also be interested in the following related tutorials: JavaScript queryselector tutorial, Element.innerHtml tutorial, Document.createElement tutorial, Document.createNodeIterator tutorial, Document.getElementById tutorial, Document.all tutorial, JQuery tutorial, Ramda tutorial, or Using jQuery DatePicker.