Class Management
Let’s now explore the power of class management in the world of style manipulation in DOM. Manipulating classes allows you to modify the style of several elements at once, making it easy to maintain your code. Let’s go straight to the details!
Adding Classes with classList.add
When we want to apply a specific style to an element, we add a class to it. Let us take a simple example:
// Finding the desired item var myElement = document.getElementById('myElement'); // Adding highlighting class MyElement.classList.add('highlight');
Now, if we have a class in CSS called.destaque, we can define specific styles for it.
Removing Classes with classList.remove
If we need to remove a class, we use classList.remove:
// Removing class 'oldstyle' MyElement.classList.remove('oldStyle');
This is useful when you want to replace one style with another.
Switching Classes with classList.toggle
If we want to create a switch to turn on and off a style, we use classList.toggle:
// Switching the 'active' class MyElement.classList.toggle('active');
This is especially useful for creating features such as theme alternators.
Checking for Class Presence with classList.contains
If we need to check whether an item has a specific class, we use classList.contains:
// Checking if the item has the 'important' class if (myElement.classList.contains('important')) { // Do something important here }
Example to improve understanding
To improve our understanding of the subject, let us create a more comprehensive example. In this example, we will have a list of items that can be highlighted or removed.
When you click on an item, the highlight class will be alternated, providing an interactive experience. Let’s get to the code!
Basic HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example of Class Management</title> <link rel="stylesheet" href="styles.css"> </head> <body> <ul id="myList"> <li onclick="toggleHighlight(this)">Item 1</li> <li onclick="toggleHighlight(this)">Item 2</li> <li onclick="toggleHighlight(this)">Item 3</li> </ul> <script src="script.js"></script> </body> </html>
CSS (styles.css):
.highlight { background-color: yellow; font-weight: bold; cursor: pointer; }
JavaScript (script.js):
function toggleHighlight(element) { // Toggling the 'highlight' class for the clicked element element.classList.toggle('highlight'); }
Visualization
- Item 1
- Item 2
- Item 3
In this example, each <li> in the list has an onclick event that calls the switch-off function when clicked. The switchDestack function uses classList.toggle to switch the ‘destack’ class for the clicked item.
When you click on an item in the list, you will see an immediate visual change, indicating that the highlighting class has been applied or removed.
Class management is a powerful tool that simplifies style manipulation in DOM. Try these methods in your own code to get a more practical understanding.
In the next module, we will explore DOM events, allowing dynamic interactions with users. Continue firmly on your learning journey!