Skip to content
Advertisements

HTML DOM classList

Why classList ?

Adding and deleting classes should be one of the most common tasks for JavaScript and DOM jobs. Adding a class is not a good way to delete or include the jquery library in simple dom jobs. jquery occupies an area of ​​85kb buddha may slow the loading of our site. It is important to have effective, local routes to accomplish common tasks such as class addition and deletion. classList is a javaScript property that fulfills this task.

The ClassList property returns the class names of an item as a DOMTokenList object.

This feature is useful for adding CSS classes on an item, deleting and transition effect.

The ClassList property can only be read, but you can change it using the add () and remove () method.


Element.classList

The classList property returns the class names of an item as a DOMTokenList object.

The classList feature comes with a few useful methods.

  • add: Adds a class.
  • remove: Deletes a class.
  • toggle: Switches to a class.
  • contains: Checks whether a class exists.
  • replace: Replaces an existing class with a new class.
  • Item (): Returns the class name from an element with the specified index number. The index starts at 0. Returns null if the index is out of range.
  • tostring (): Return the class list as a string.

Syntax:

 element.classList 
  • lenght: Returns the total number of classes in the list.

HTML DOM classList Examples

Adding a CSS Class

Multiple classes can be added to the div tag.

classList example 1
<body>

    <button onclick="myClassList()">ADD CLASS</button>
    <div id="box"></div>

    <script>

        function myClassList() {
            document.getElementById("box").classList.add("boxColor", "boxSize", "boxPosition");
        }
        

    </script>

</body>

Deleting a CSS Class

Deletes the specified class names.

classList example 2
<body>

    <button onclick="myClassList()">ADD CLASS</button>
    <button onclick="myRemoveList()">REMOVE CLASS</button>
    <div id="box"></div>

    <script>

        function myClassList() {
            document.getElementById("box").classList.add("boxColor", "boxSize", "boxPosition");
        }

        function myRemoveList() {
            document.getElementById("box").classList.remove("boxColor", "boxSize", "boxPosition");
        }
        
    </script>
</body>

Changing a CSS Class

Sometimes we need to add or delete a class name based on a user interaction or the state of the site. This is accomplished using the toggle () method as shown below

classList example 3
<body>

    <button onclick="toggleFunction()">TOGGLE CLASS</button>
    <div id="box"></div>

    <script>

        function toggleFunction() {
            document.getElementById("box").classList.toggle("boxDesign")
        }

    </script>
</body>

Learning the CSS class name

The ClassList API provides a method to retrieve class names by location in the class list. Let’s say we want to learn the names of the first, second and third grades of our element. We will write the following code:

classList example 4
<body>

    <button onclick="info()">INFO</button>
    <div id="box" class="classlist1 classlist2 classlist3" ></div>

    <script>

        function info() {
            let info1 = document.getElementById("box").classList.item(0);
            alert(info1);
            let info2 = document.getElementById("box").classList.item(1);
            alert(info2);
            let info3 = document.getElementById("box").classList.item(2);
            alert(info3);
        }

    </script>
</body>

Learn the total number of CSS classes

There are cases where we need to know the number of classes applied to a particular item, although not very common. The ClassList API allows us to learn this number with the length property, as shown below:

classList example 5
<body>

    <button onclick="info()">INFO</button>
    <div id="box" class="classlist1 classlist2 classlist3" ></div>

    <script>

        function info() {
            let info = document.getElementById("box").classList.length;
            alert(info)
        }

    </script>
</body>

Determining if a Class exists

Sometimes we may want to perform a specific action based on the existence of a particular class. To perform the test, we use the contains () method as follows:

classList example 6
<body>

    <button onclick="info()">INFO</button>
    <div id="box" class="classlist1 classlist2 classlist3" ></div>
    <div id="result"></div>

    <script>

        function info() {
            let info1 = document.getElementById("box").classList.contains("classlist1");
            let info2 = document.getElementById("box").classList.contains("classlist1");
            let info3 = document.getElementById("box").classList.contains("classlist1");
            let res = document.getElementById("result");
            res.innerHTML = " classlist1: " + info1 + "<br>" + " classlist2: " + info2
            + "<br>" +  " classlist3: " + info3;
        }

    </script>
</body>

Replace existing class with a new class

Replaces an existing class with a new class.

classList example 7
<body>

    <button onclick="info()">INFO</button>
    <div id="box" class="boxDesign" ></div>
    <div id="result"></div>

    <script>

        function info() {
            document.getElementById("box").classList.replace("boxDesign", "boxDesignReplace")
        }

    </script>

Rotating a class list as a string

To return the class list as a string, you can use the toString () method shown below.

<body>

    <div id="el" class="boxDesign" ></div>

    <script>

        var x = document.querySelector('#el').classList.toString();
        console.log(x); 

        document.querySelector('#el').classList.add('test', 'makale');
        var x = document.querySelector('#el').classList.toString();
        console.log(x);

    </script>
</body>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: