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

Top comments (0)