DEV Community

Husniddin6939
Husniddin6939

Posted on

-ClassList

                               ClassList
Enter fullscreen mode Exit fullscreen mode

ClassList - this method can add new classname to opened tag and its keys these.

1.Add => this key will add new classname

menu.classList.add('bg-success');

console.log(menu.classList);

Enter fullscreen mode Exit fullscreen mode

Image description

throught this key we can add more classnames in once like so

menu.classList.add('bg-success','gold','red');

console.log(menu.classList);

Enter fullscreen mode Exit fullscreen mode

Image description

2.Remove => this key remove classname more then once

menu.classList.remove('gold','red');

console.log(menu.classList);
Enter fullscreen mode Exit fullscreen mode

Image description

3.Contains => this key search classname which we type in and it response us boolean (true/false);

menu.classList.contains('bg-success');

console.log(menu.classLIst);
Enter fullscreen mode Exit fullscreen mode

Image description

4.Toggle => This key if there is classname which we type the same it removed, otherwise it adds our classname like newone.

menu.classList.toggle('orange');

console.log(menu.classList);
Enter fullscreen mode Exit fullscreen mode

Image description

then if we call this classname again "orange" via toggle key , it remove in this time

menu.classList.toggle('orange');

console.log(menu.classList);
Enter fullscreen mode Exit fullscreen mode

Image description

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more