. Advertisement .
..3..
. Advertisement .
..4..
The ability to add a class to the body element using JavaScript can come in handy when you need to modify your HTML page on the fly. Keep reading to find out how you can accomplish this task.
Add A Class To The Body Element Using JavaScript
Element.classList
In general, you will need to rely on Element.classList to access and modify the classes of an HTML element. This read-only returns a live DOMTokenList interface storing all the class attributes of that element. Like other DOMTokenList interfaces, this class list is delimited by space characters.
Remember that when the class attribute of the element is empty or not set, the Element.classList property returns an empty DOMTokenList. This property itself is read-only. But you can invoke its method, like add() and remove(), to modify the associated DOMTokenList.
Typically, we can access this property with HTML elements returned by methods like getElementById() or createElement().
Example:
const p = document.createElement('p');
p.classList.add("introduction");
console.log(p.outerHTML);
Output:
<p class="introduction"></p>You can also use the remove() method to remove a class from an element’s classlist:
p.classList.remove("introduction");
console.log(p.outerHTML);
Output:
<p class=""></p>There is also the toggle() method, which adds a class if it is set and removes it otherwise:
console.log(p.outerHTML);
p.classList.toggle("introduction");
console.log(p.outerHTML);
p.classList.toggle("introduction");
console.log(p.outerHTML);
Output:
<p class=""></p>
<p class="introduction"></p>
<p class=""></p>
Use Element.classList With The Body Element
Suppose we have this simple HTML page, which will be used throughout the tutorial:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”style.css”>
<title>ITTutoria Example</title>
</head>
<body>
<h1>Welcome to ITTutoria – Knowledge Portal For Programmers</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>ITTutoria Example</title>
</head>
<body>
<h1>Welcome to ITTutoria - Knowledge Portal For Programmers</h1>
</body>
</html>
......... ADVERTISEMENT .........
..8..
We will create a button that, once we click it, JavaScript will add one or multiple classes in this style.css file to the body element:
.monospace {
font-family: "Consolas", monospace;
}
.colored {
color: rgb(188, 62, 62);
background-color: rgb(173, 195, 244);
}
First, we insert the button element and the script file that will handle the click event.
<body>
<h1>Welcome to ITTutoria – Knowledge Portal For Programmers</h1>
<button id=”addClass” class=”button”>Add Class!</button>
<script src=”script.js”></script>
</body>
<body>
<h1>Welcome to ITTutoria - Knowledge Portal For Programmers</h1>
<button id="addClass" class="button">Add Class!</button>
<script src="script.js"></script>
</body>
......... ADVERTISEMENT .........
..8..
This is the script.js file you will need:
const change = document.querySelector('#addClass');
change.addEventListener('click', () => {
document.body.classList.add('monospace');
})
We use the document.querySelector() method to get the HTML object of the button first, then we add an event listener to it. Since <body> is a special element, you can use the document.body property to represent this node. And the classList.add() method is used to add the class monospace to the <body> element.
This is how the HTML page appears after you click the button:
......... ADVERTISEMENT .........
..8..
Remember that you can also add multiple classes within the same classList.add() method:
const change = document.querySelector(‘#addClass’);
change.addEventListener(‘click’, () => {
document.body.classList.add(‘monospace’, ‘colored’);
})
const change = document.querySelector('#addClass');
change.addEventListener('click', () => {
document.body.classList.add('monospace', 'colored');
})
......... ADVERTISEMENT .........
..8..
If you want to toggle the classes instead, use classList.toggle():
index.html
<body>
<h1>Welcome to ITTutoria - Knowledge Portal For Programmers</h1>
<button id="toggleClass" class="button">Toggle Class!</button>
<script src="script.js"></script>
</body>
script.js
const change = document.querySelector('#toggleClass');
change.addEventListener('click', () => {
document.body.classList.toggle('colored');
})
The default HTML page:
......... ADVERTISEMENT .........
..8..
Press the button:
......... ADVERTISEMENT .........
..8..
Press the button again:
......... ADVERTISEMENT .........
..8..
Summary
You can add a class to the body element using JavaScript by using the Element.classList property to access its class attributes. While it is a read-only property, it allows us to add the DOMTokenList of <body> with the add() method.
You can also use add() to add a class to a clicked method. Read this guide to learn more about this.
Leave a comment