Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में JavaScript का इस्तेमाल करके body element में class को add और remove कैसे करा सकते है वह example के साथ समझेंगे!
On element click add class to the body element using javascript
Body element में किसी element के click पर class को add और remove कराएँगे!. Body element में class को add करने के लिए classList.add() method और class remove करने के लिए classList.remove() method का इस्तेमाल कर सकते है!. Body element को हम document object से access कर सकते है, और अगर body element me class already available है तो वह दुबारा से वह class add नहीं होगा!.
Example:
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Class on Button Click</title>
<style>
/* Define your CSS styles here */
.new-class {
background-color: lightblue;
}
</style>
</head>
<body>
<!-- Your HTML content here -->
<button id="addClassBtn">Add Class</button>
<button id="removeClassBtn">Remove Class</button>
</body>
</html>
Javascript code
<script>
//For add class in body element
function addClassToBody() {
var bodyElement = document.body;
// Add a class to the body element
bodyElement.classList.add("new-class");
}
const addButton = document.getElementById("addClassBtn");
addButton.addEventListener("click", addClassToBody);
// Remove class from body elements
function removeClassToBody() {
var bodyElement = document.body;
// Add a class to the body element
bodyElement.classList.add("new-class");
}
const removeClass = document.getElementById("removeClassBtn");
removeClass.addEventListener("click", removeClassToBody);
</script>
Full source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Class on Button Click</title>
<style>
/* Define your CSS styles here */
.new-class {
background-color: lightblue;
}
</style>
</head>
<body>
<!-- Your HTML content here -->
<button id="addClassBtn">Add Class</button>
<button id="removeClassBtn">Remove Class</button>
<script>
//For add class in body element
function addClassToBody() {
var bodyElement = document.body;
// Add a class to the body element
bodyElement.classList.add("new-class");
}
const addButton = document.getElementById("addClassBtn");
addButton.addEventListener("click", addClassToBody);
// Remove class from body elements
function removeClassToBody() {
var bodyElement = document.body;
// Add a class to the body element
bodyElement.classList.add("new-class");
}
const removeClass = document.getElementById("removeClassBtn");
removeClass.addEventListener("click", removeClassToBody);
</script>
</body>
</html>
ऊपर के example में देख सकते है, body element में हमने दो button add करे है, जिसमे एक button के blick पर body element में class को add करा है, दूसरे button के click पर हमने body element से class को remove कराया है!
On document load add class to in body element using javascript
Document के load पर हम body element में class को add और remove करा सकते है!.
Example:
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding Class to Body</title>
<style>
/* Define your CSS styles here */
.new-class {
background-color: lightblue;
}
</style>
</head>
<body>
</body>
</html>
Javascript code
<script>
document.addEventListener("DOMContentLoaded", function() {
var bodyElement = document.body;
//Remove class from body element
bodyElement.classList.remove("new-class")
// add class in body element
bodyElement.classList.add("new-class");
});
</script>
Body element को हम document object से access कर सकते है, और अगर body element में class already available है तो वह दुबारा से class add नहीं होगा!.
Full source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding Class to Body</title>
<style>
/* Define your CSS styles here */
.new-class {
background-color: lightblue;
}
</style>
</head>
<body>
<script>
document.addEventListener("DOMContentLoaded", function() {
var bodyElement = document.body;
//Remove class from body element
bodyElement.classList.remove("new-class")
// add class in body element
bodyElement.classList.add("new-class");
});
</script>
</body>
</html>
ऊपर के example में देख सकते है की document के load पर हमने body element से class को remove करा है, और उसके बाद में body element में class को add करा है!
हम एक साथ कई classes को body element में add और remove करा सकते है!.
<script> //Add multiple classes in body element document.body.classList.add( 'class_1', 'class_2', 'class_3' ); //Remove multiple classes from body element document.body.classList.remove( 'class_1', 'class_2' ); </script>
यदि add() method में passed कोई भी class पहले से ही body element में available है, तो उस class को body element में add नहीं किया जाता!. अगर हम classList.add() और classList.remove() method का इस्तेमाल करते time, आपके इसके बारे में चिंता करने की जरूर नहीं है!.
