February 10, 2021 09:16 am GMT
Original Link: https://dev.to/devlorenzo/js-how-to-add-a-class-to-an-element-2f28
JS: How class list works
Hello World!
New episode of the series - A CSS/JS trick in 5 minutes.
Today we will quickly see how to manipulate a class throw javascript (add, remove and check presence).
In reality, you have to imagine classes as a list, all elements in a page have is own list of class you can modify with javascript. So if you want to modify an element you don't need to do all the stuff (it's much longer and boring) with javascript. You just have to define a class in CSS with all the attributes then add this class to the element(s) you want to modify. So for example you can have a live element update on scrolling
Add
let foo = document.querySelector("#foo"); element.classList.add("newClass");
Enter fullscreen mode Exit fullscreen mode
Remove
foo.classList.remove("classToRemove");
Enter fullscreen mode Exit fullscreen mode
You can also check if an element contains a class (and then perform operations with the boolean result):
foo.classList.contains('AreYouHere')
Enter fullscreen mode Exit fullscreen mode
Hope this helped and thanks for reading!
Please smash that like button to make me understand that you want the series to continue :)
Original Link: https://dev.to/devlorenzo/js-how-to-add-a-class-to-an-element-2f28
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To