How do I add the class name "foo" to the root <html>
element without using jQuery (or a similar library)?
HTML. Using . add() method: This method is used to add a class name to the selected element.
If you want to use a class, use a full stop (.) followed by the class name in a style block. Next, use a bracket called a declaration block that contains the property to stylize the element, such as text color or text size.
Don't get me wrong - jQuery is still a wonderful library and most often than not you will be better off using it. However, for smaller things like simple pages with limited JS interactions, browser extensions and mobile sites, you can use vanilla JS.
You can use the classList to access an element's list of classes.
document.documentElement.classList.add('my-awesome-class'); document.documentElement.classList.remove('my-awesome-class'); document.documentElement.classList.contains('my-awesome-class');
Just get the element and append to the list of classes.
document.documentElement.className += " foo";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With