JavaScript classList.add
last modified April 2, 2025
In this article, we explore the element.classList.add method in
JavaScript. This method is essential for dynamically manipulating CSS classes
on DOM elements, allowing for flexible styling and state management.
Basic Definition
The classList.add method adds one or more class names to an
element's class attribute. If the class already exists on the element, it
won't be added again, preventing duplicates.
The classList property provides methods to manipulate an element's
classes without directly working with strings. It's more convenient than
modifying the className property directly.
Adding a Single Class
This example demonstrates how to add a single CSS class to an element.
<!DOCTYPE html>
<html>
<head>
<title>Adding Single Class</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p id="text">This text will be highlighted.</p>
<button onclick="highlightText()">Highlight</button>
<script>
function highlightText() {
const textElement = document.getElementById('text');
textElement.classList.add('highlight');
}
</script>
</body>
</html>
In this example, we have a paragraph and a button. When the button is clicked,
the highlightText function adds the 'highlight' class to the
paragraph using classList.add.
This demonstrates the basic usage of classList.add to apply CSS
styles dynamically. The method is called on an element's classList
property with the class name as an argument.
Adding Multiple Classes
This example shows how to add multiple classes to an element at once.
<!DOCTYPE html>
<html>
<head>
<title>Adding Multiple Classes</title>
<style>
.big {
font-size: 24px;
}
.red {
color: red;
}
.border {
border: 2px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div id="content">This content will be styled.</div>
<button onclick="styleContent()">Style Content</button>
<script>
function styleContent() {
const content = document.getElementById('content');
content.classList.add('big', 'red', 'border');
}
</script>
</body>
</html>
Here we have a div element and a button. When clicked, the button adds three
classes ('big', 'red', and 'border') to the div using a single
classList.add call.
This demonstrates that classList.add can accept multiple arguments,
each representing a class to add. The classes are added in the order specified.
Toggle Element Visibility
This example demonstrates using classList.add to show/hide elements.
<!DOCTYPE html>
<html>
<head>
<title>Toggle Visibility</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<p id="message" class="hidden">This message was hidden!</p>
<button onclick="showMessage()">Show Message</button>
<script>
function showMessage() {
const message = document.getElementById('message');
message.classList.remove('hidden');
}
</script>
</body>
</html>
In this example, we have a hidden paragraph and a button. When the button is
clicked, the hidden class is removed to show the paragraph.
While this example uses classList.remove, it demonstrates how
classList.add would work for the opposite functionality (hiding
the element). The classList methods work together for complete
class manipulation.
Dynamic Theme Switching
This example shows how to use classList.add to switch themes.
<!DOCTYPE html>
<html>
<head>
<title>Theme Switching</title>
<style>
body {
transition: background-color 0.3s, color 0.3s;
}
.dark {
background-color: #333;
color: white;
}
.light {
background-color: white;
color: black;
}
</style>
</head>
<body class="light">
<h1>Theme Switcher</h1>
<button onclick="switchToDark()">Dark Theme</button>
<button onclick="switchToLight()">Light Theme</button>
<script>
function switchToDark() {
document.body.classList.remove('light');
document.body.classList.add('dark');
}
function switchToLight() {
document.body.classList.remove('dark');
document.body.classList.add('light');
}
</script>
</body>
</html>
Here we have a page with two theme options. The buttons switch between light and dark themes by adding and removing the appropriate classes.
This demonstrates a practical use of classList.add for theme
switching. The transition property creates a smooth color change effect when
themes are switched.
Form Validation Styling
This example shows how to use classList.add for form validation.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<style>
.error {
border: 2px solid red;
}
.success {
border: 2px solid green;
}
</style>
</head>
<body>
<input type="text" id="username" placeholder="Enter username">
<button onclick="validateInput()">Validate</button>
<p id="message"></p>
<script>
function validateInput() {
const input = document.getElementById('username');
const message = document.getElementById('message');
if (input.value.length < 3) {
input.classList.add('error');
input.classList.remove('success');
message.textContent = 'Username must be at least 3 characters';
} else {
input.classList.add('success');
input.classList.remove('error');
message.textContent = 'Username is valid!';
}
}
</script>
</body>
</html>
In this example, we validate a username input field. If validation fails, we add an 'error' class; if it passes, we add a 'success' class.
This demonstrates how classList.add can be used for visual feedback
in form validation. The method helps maintain clean separation between
JavaScript logic and CSS styling.
Source
In this article, we have shown how to use element.classList.add
in JavaScript. This method is fundamental for dynamic CSS class manipulation
in modern web development.
Author
List all JS DOM tutorials.