Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Add class (odd and even) in HTML via JavaScript?
JavaScript provides several ways to add CSS classes to HTML elements based on odd and even positions. You can use CSS nth-child selectors or JavaScript to dynamically add classes to elements.
Method 1: Using CSS nth-child Selectors
The simplest approach is using CSS nth-child(odd) and nth-child(even) selectors to style elements directly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odd Even Classes</title>
<style>
.subjectName:nth-child(odd) {
color: blue;
background-color: #f0f0f0;
padding: 10px;
margin: 5px;
}
.subjectName:nth-child(even) {
color: purple;
background-color: #e0e0e0;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<section class="subjects">
<article class="subjectName">MongoDB</article>
<article class="subjectName">JavaScript</article>
<article class="subjectName">Java</article>
<article class="subjectName">MySQL</article>
</section>
</body>
</html>
Method 2: Using JavaScript to Add Odd/Even Classes
For more control, you can use JavaScript to dynamically add specific classes to odd and even positioned elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Odd Even Classes</title>
<style>
.odd-class {
color: blue;
background-color: #f0f0f0;
padding: 10px;
margin: 5px;
}
.even-class {
color: purple;
background-color: #e0e0e0;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<section class="subjects">
<article class="subjectName">MongoDB</article>
<article class="subjectName">JavaScript</article>
<article class="subjectName">Java</article>
<article class="subjectName">MySQL</article>
</section>
<script>
const elements = document.querySelectorAll('.subjectName');
elements.forEach((element, index) => {
if ((index + 1) % 2 === 1) {
element.classList.add('odd-class');
} else {
element.classList.add('even-class');
}
});
</script>
</body>
</html>
Method 3: Using JavaScript with Custom Class Names
You can also create a more flexible function to add custom odd and even classes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Odd Even Function</title>
<style>
.highlight-odd {
color: red;
font-weight: bold;
padding: 8px;
}
.highlight-even {
color: green;
font-style: italic;
padding: 8px;
}
</style>
</head>
<body>
<ul id="itemList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<script>
function addOddEvenClasses(selector, oddClass, evenClass) {
const elements = document.querySelectorAll(selector);
elements.forEach((element, index) => {
if ((index + 1) % 2 === 1) {
element.classList.add(oddClass);
} else {
element.classList.add(evenClass);
}
});
}
// Apply the function
addOddEvenClasses('#itemList li', 'highlight-odd', 'highlight-even');
</script>
</body>
</html>
Comparison
| Method | Flexibility | Performance | Use Case |
|---|---|---|---|
| CSS nth-child | Limited | Best | Static styling |
| JavaScript classList | High | Good | Dynamic content |
| Custom function | Highest | Good | Reusable solution |
Conclusion
Use CSS nth-child selectors for simple static styling, or JavaScript classList methods for dynamic content where you need more control over class assignment. The JavaScript approach is particularly useful when working with dynamically generated elements.
679 Views
