Languages
Wiki
All Wiki Articles Create Wiki Article
programming
css
class
javascript
attribute
class-list
6 more ...
[Edit]
EN

JavaScript - add, remove, get and check element class name

2 contributors
7 contributions
0 discussions
2 points
Created by:
Savannah
559

In this article, we want to show a simple summary of the operations on the classList property located inside the element. The class list lets to add single class names into elements under JavaScript.

Note:

The element can have only unique class names like Set does.

 

 OperationDescription
1add

With classList.add() we are able to add a single class name to element classes.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element">Some content here ...</div>
  <script>

    var element = document.querySelector('#element');

    element.classList.add('layout');
    element.classList.add('visible');

    console.log(element.outerHTML);

  </script>
</body>
</html>
2get

By default classList.get() function is not available.

Go to below classList.contains() function description to find an alternative.

3set

When classList.toggle() is used with two parameters work like set() method:

  • adding class name when the second parameter is true,
    e.g. classList.toggle('class-name', true)
  • removing class name when the second parameter is false,
    e.g. classList.toggle('class-name', false)
// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element" class="border">Some content here ...</div>
  <script>

    var element = document.querySelector('#element');
    
    element.classList.toggle('visible', true);
    element.classList.toggle('shadow', true);
    element.classList.toggle('border', false);
    
    console.log(element.outerHTML);

  </script>
</body>
</html>
4remove

With classList.remove() we are able to remove a single class name from element classes.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element" class="border shadow">Some content here ...</div>
  <script>

    var element = document.querySelector('#element');

    element.classList.remove('border');
    element.classList.remove('shadow');

    console.log(element.outerHTML);

  </script>
</body>
</html>
5replace

With classList.replace() we are able to replace a single class name from element classes with a new one.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element" class="border">Some content here ...</div>
  <script>

    var element = document.querySelector('#element');

    element.classList.replace('border', 'shadow');

    console.log(element.outerHTML);

  </script>
</body>
</html>
6toggle

When classList.toggle() is used with a single parameter:

  • removes class name if already exists in the element,
  • adds class name in another case.

In other words, we can say: the classList.toggle() method works like a switch.

When classList.toggle() added class name it returns true, in other cases false (when removed class name).

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element" class="border">Some content here ...</div>
  <script>

    var element = document.querySelector('#element');

    element.classList.toggle('shadow');
    element.classList.toggle('border');

    console.log(element.outerHTML);

  </script>
</body>
</html>

Note:

Go to the 3. set example to see the toggle() with two arguments. 

7contains

With classList.contains() we are able to check if the element's classList contains the given class name.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element" class="border">Some content here ...</div>
  <script>

    var element = document.querySelector('#element');
    
    console.log(element.classList.contains('border')); // true
    console.log(element.classList.contains('shadow')); // false

  </script>
</body>
</html>
8clear

With classList.contains() we are able to check if the element's classList contains the given class name.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element" class="border shadow">Some content here ...</div>
  <script>

    var element = document.querySelector('#element');

    element.className = '';

    console.log(element.outerHTML);

  </script>
</body>
</html>
9iterating

In the example below, we use forEach() method to iterate and display class names from the element's classList.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element" class="border shadow">Some content here ...</div>
  <script>

    var element = document.querySelector('#element');

    element.classList.forEach(function(className) {
        console.log(className);
    });

  </script>
</body>
</html>

Alternative titles

  1. JavaScript - element classList usage example
  2. JavaScript - element class list usage example
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Direct link
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join