JavaScript Add Class To Body
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this article we will show you the solution of JavaScript add class to body, for manipulating the components of the website dynamically, powerful tool that allows us to do so is JavaScript in the world of Web Application development.
Adding or removing CSS classes to and from elements is a routine operation, and the <body> component is not an exemption.
In this article, we will have a look towards how we can use JavaScript for adding a class to the element <body>.
Using just a few lines of code we can enable controlling the behavior of our entire website and also styling.
We will manipulate the Document Object Model (DOM) with JavaScript to add a class to the element <body>.
To add a specific class, we must first choose the element <body> and use the classList attribute.
Step By Step Guide On JavaScript Add Class To Body :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Class to Body</title>
<style>
.ROY-bg {
width: 100%;
height: 100vh;
background: linear-gradient(#FF0000, #FFA500, #FFFF00);
color: white;
}
button{
background: linear-gradient(#FF0000, #FFA500, #FFFF00);
color: black;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a sample HTML page to add class to body.</p>
<button onclick="addClassToBody()">Add Class to Body</button>
<script>
function addClassToBody() {
const body = document.body;
body.classList.add("ROY-bg");
}
</script>
</body>
</html>
- <style>: Contains CSS styling commands for the page.
- The CSS class .ROY-bg provides a linear gradient of colors (#FF0000 to #FFFF00) for the entire page's background and changes the text color to white.
- button: Specifies CSS styles to buttons, giving them a backdrop with an identical linear gradient but black text.
- The body element of the HTML document, which includes the webpage's primary content, is the place where it all begins.
- The heading "Hello, World!" is displayed in the <h1> component within the <body>.
- There is a <button> element containing the text "Add Class to Body." This button is a consumer interface component that executes a JavaScript function whenever it is clicked.
- A JavaScript function called addClassToBody is declared within the <script> tags.
- Whenever the button presses down, this function, addClassToBody(), is supposed to run.
- Utilizing document.body, the function first chooses the <body> component. The <body> DOM element regard is retrieved by this line.
- Next, the CSS class ROY-bg is added to the <body> component using the classList.add() method. The <body> component is given the provided styles when this class is added.
- onclick attribute: onclick="addClassToBody()" is configured using button. This indicates that whenever the button will get clicked, the function addClassToBody will get executed.
Conclusion :-
In this article, we learnt how to apply a class into JavaScript's "body" element.
The appearance Whenever we want to change functionality or design of our web application dynamically we can use this method for that.
Mostly we use this method for converting light mode to dark mode or altering the layout as per user need.
Keep in mind that you may combine this feature with event listeners in order to improve it even more.
This will enable you to add or remove classes in responses to user activities, resulting in exciting and engaging web experiences.
I hope this article on JavaScript add class to body helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
