How to Toggle an Element Class in JavaScript ?
Last Updated :
20 Sep, 2024
In JavaScript, toggling an element class refers to the process of dynamically adding or removing a CSS class from an HTML element. This allows developers to easily change an element's appearance or behavior in response to user actions, such as clicks or events.
These are the following methods for toggling an element Class:
Method 1: Using the toggle() method
The toggle() method in JavaScript's classList object adds a specified class to an element if it's not present, and removes it if it is. This allows for easy, dynamic switching of styles or behaviors in response to user interactions or events.
Example: In this example we toggles a CSS class on a paragraph element. When the button is clicked, it dynamically adds or removes the "paragraphClass," changing the font size and color of the text.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geeks for Geeks</title>
<style>
.paragraphClass {
font-size: 30px;
color: red;
}
#Button {
margin-top: 15px;
}
</style>
<script>
function myFunc() {
let para = document.getElementById("p");
para.classList.toggle("paragraphClass");
}
</script>
</head>
<body>
<p id="p">
Click on the button to toggle
between the class to see the
effects
</p>
<button id="Button" onclick="myFunc()">
Click Me
</button>
</body>
</html>
Output:
How to Toggle an Element Class in JavaScript ?Method 2: Using contains(), add() and remove() Method
In this example we use classList.contains() to check if an element has a specific class, classList.add() to add a class, and classList.remove() to remove it. These methods offer fine control over element class manipulation dynamically.
Example: In this example we toggles a CSS class using contains(), add(), and remove(). It checks if the paragraph has a specific class, removes it if present, or adds it otherwise on button click.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geeks for Geeks</title>
<style>
.paragraphClass {
font-size: 30px;
color: red;
}
#Button {
margin-top: 15px;
}
</style>
<script>
function myFunc() {
let para = document.getElementById("p");
if (para.classList.contains("paragraphClass")) {
para.classList.remove("paragraphClass");
}
else {
para.classList.add("paragraphClass");
}
}
</script>
</head>
<body>
<p id="p">
Click on the button to toggle
between the class to see the
effects
</p>
<button id="Button" onclick="myFunc()">
Click Me
</button>
</body>
</html>
Output:
How to Toggle an Element Class in JavaScript ?
Similar Reads
How to Add a Class to DOM Element in JavaScript? Adding a class to a DOM (Document Object Model) element in JavaScript is a fundamental task that enables developers to dynamically manipulate the appearance and behavior of web pages. Classes in HTML provide a powerful way to apply CSS styles or JavaScript functionality to multiple elements at once.
2 min read
How to Hide an HTML Element by Class using JavaScript? To hide an HTML element by class using JavaScript, the CSS display property can be manipulated.Below are the approaches to hide an HTML element by class:Table of ContentUsing getElementsByClassName() selectorUsing querySelectorAll() selectorApproach 1: Using getElementsByClassName() selectorIn this
3 min read
How to Toggle a Class in Vue.js ? In this article, we will use Vue.js component with a simple HTML template containing <div> and button elements. The goal is to toggle the presence of a CSS class on the <div> element when the button is clicked. By understanding the concepts of data binding, conditional rendering, and eve
3 min read
How to remove a Class name from an Element using JavaScript ? Removing a class name from an HTML element using JavaScript is often used to dynamically modify the styling or behavior of an element based on user interactions, events, or other conditions. The operation can be achieved using classList property, that allows you to add, remove, or toggle classes. Sy
3 min read
How to toggle a boolean using JavaScript ? A boolean value can be toggled in JavaScript by using two approaches which are discussed below: Table of Content Using the logical NOT operatorUsing the ternary operatorUsing the XOR (^) operatorMethod 1: Using the logical NOT operator The logical NOT operator in Boolean algebra is used to negate an
3 min read
Change an Element Class with JavaScript Here are two different ways to change the element class with JavaScript.1. Using .className PropertyIn this approach, we are using document.getElementById() method to get access to the element for which we want to change the class name then we use using .className property on that selected element t
2 min read