If you don’t know how to add class to the body Element using JavaScript, please check out the information in this post. I will show you how to do it.
Add A Class To The Body Element Using JavaScript
Method 1: Using element.classList.add()
Syntax:
element.classList.add("name_of_the_class");See the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="container">
<h1>Welcome to our Page!</h1>
</div>
<script>
var demoAddClass = document.body;
demoAddClass.classList.add('body-class')
</script>
</body>
</html>Output:
As you can see, the result is that the body tag now has a class attribute with the corresponding value “body-class”, which we passed in the add() method.
If you want to add multiple classes to the body element, the add() method also helps you to do it. Change the script as follow:
<script>
var demoAddClass = document.body;
demoAddClass.classList.add("body-class1", "body-class2")
</script>Output:
Note: if you try to add two class names with the same value, the add() method will automatically check for duplicates and only add one time.
<script>
var demoAddClass = document.body;
demoAddClass.classList.add("body-class1", "body-class1")
</script>Output:
Method 2: Reassign the value of the className property
You can reassign the value of the className property to add class to the body element using JavaScript.
Syntax:
element.className = "name_of_the_class";See the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="container">
<h1>Welcome to our Page!</h1>
</div>
<script>
var demoAddClass = document.body;
demoAddClass.className = 'body-class'
</script>
</body>
</html>Output:
You still have the same result as using solution one
If you want to add more classes, use the “+=” operator. However, from the 2nd element onwards, prepend it with a space. Otherwise, you will have only one className, which is the concatenated strings:
<script>
var demoAddClass = document.body;
demoAddClass.className = "body-class1"
demoAddClass.className += " body-class2"
</script>Output:
Note: Unlike method one, this method still allows you to add two identical class names to the body element.
<script>
var demoAddClass = document.body;
demoAddClass.className = "body-class1"
demoAddClass.className += " body-class1"
</script>Output:
One suggestion for you is to use method one instead of method two because when using method two, you will likely make mistakes leading to unexpected errors.
Summary
In conclusion, there are two ways for you to add a class to the body element using JavaScript. You can use either way, but be careful when using the second method.
Maybe you are interested:
- Add Line breaks to a Textarea using JavaScript
- Change the Text of a Div Element using JavaScript
- Get the last element of an array in javascript
My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js
