<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<div class="container">
<h1>Add Class to Element in JavaScript</h1>
<p class="subtitle">Master the classList API and class manipulation techniques</p>
<div class="demo-grid">
<!-- Demo 1: Basic Operations -->
<div class="demo-card">
<h2>
<ion-icon name="cube-outline"></ion-icon>
Basic Operations
</h2>
<div class="demo-box" id="box1">
<p>Click buttons to manipulate classes</p>
<span class="status-badge status-inactive" id="status1">Inactive</span>
</div>
<div class="button-group">
<button class="btn btn-small" id="add1">
<ion-icon name="add"></ion-icon>
Add
</button>
<button class="btn btn-small btn-secondary" id="remove1">
<ion-icon name="remove"></ion-icon>
Remove
</button>
<button class="btn btn-small btn-secondary" id="toggle1">
<ion-icon name="repeat"></ion-icon>
Toggle
</button>
</div>
</div>
<!-- Demo 2: Multiple Classes -->
<div class="demo-card">
<h2>
<ion-icon name="layers-outline"></ion-icon>
Multiple Classes
</h2>
<div class="demo-box" id="box2">
<p>Add multiple classes at once</p>
</div>
<div class="button-group">
<button class="btn btn-small" id="addBordered">Border</button>
<button class="btn btn-small" id="addRounded">Round</button>
<button class="btn btn-small" id="addShadow">Shadow</button>
</div>
<div class="button-group" style="margin-top: 10px;">
<button class="btn btn-small" id="addAll">Add All</button>
<button class="btn btn-small btn-secondary" id="removeAll">Clear</button>
</div>
</div>
<!-- Demo 3: Conditional Classes -->
<div class="demo-card">
<h2>
<ion-icon name="checkmark-circle-outline"></ion-icon>
Conditional Check
</h2>
<div class="demo-box" id="box3">
<p>Uses hasClass() method</p>
</div>
<div class="button-group">
<button class="btn btn-small" id="check3">
<ion-icon name="search"></ion-icon>
Check Class
</button>
<button class="btn btn-small" id="toggleHighlight">
<ion-icon name="color-wand"></ion-icon>
Toggle
</button>
</div>
</div>
</div>
<!-- Multiple Elements Demo -->
<div class="demo-card" style="margin-bottom: 30px;">
<h2>
<ion-icon name="grid-outline"></ion-icon>
Multiple Elements Selection
</h2>
<p style="font-size: 14px; color: #666; margin-bottom: 15px;">
Click boxes to toggle active state using querySelectorAll
</p>
<div class="multi-demo">
<div class="small-box" data-id="1">Box 1</div>
<div class="small-box" data-id="2">Box 2</div>
<div class="small-box" data-id="3">Box 3</div>
<div class="small-box" data-id="4">Box 4</div>
<div class="small-box" data-id="5">Box 5</div>
<div class="small-box" data-id="6">Box 6</div>
</div>
<div class="button-group">
<button class="btn" id="selectAll">
<ion-icon name="checkbox-outline"></ion-icon>
Select All
</button>
<button class="btn btn-secondary" id="deselectAll">
<ion-icon name="close-outline"></ion-icon>
Deselect All
</button>
</div>
</div>
<!-- Code Examples -->
<div class="code-section">
<h2>
<ion-icon name="code-slash-outline"></ion-icon>
JavaScript Code Examples
</h2>
<div class="code-title">1. Add a Single Class</div>
<div class="code-block">
<span class="comment">// Get element by ID</span>
<span class="keyword">const</span> element = document.<span class="function">getElementById</span>(<span class="string">'myElement'</span>);
<span class="comment">// Add a class</span>
element.classList.<span class="function">add</span>(<span class="string">'highlight'</span>);
</div>
<div class="code-title">2. Add Multiple Classes</div>
<div class="code-block">
<span class="comment">// Add multiple classes at once</span>
element.classList.<span class="function">add</span>(<span class="string">'highlight'</span>, <span class="string">'bordered'</span>, <span class="string">'shadow'</span>);
</div>
<div class="code-title">3. Remove a Class</div>
<div class="code-block">
<span class="comment">// Remove a single class</span>
element.classList.<span class="function">remove</span>(<span class="string">'highlight'</span>);
<span class="comment">// Remove multiple classes</span>
element.classList.<span class="function">remove</span>(<span class="string">'highlight'</span>, <span class="string">'bordered'</span>);
</div>
<div class="code-title">4. Toggle a Class</div>
<div class="code-block">
<span class="comment">// Toggle class on/off</span>
element.classList.<span class="function">toggle</span>(<span class="string">'active'</span>);
<span class="comment">// Toggle with condition (force add or remove)</span>
element.classList.<span class="function">toggle</span>(<span class="string">'active'</span>, <span class="keyword">true</span>); <span class="comment">// Force add</span>
element.classList.<span class="function">toggle</span>(<span class="string">'active'</span>, <span class="keyword">false</span>); <span class="comment">// Force remove</span>
</div>
<div class="code-title">5. Check if Class Exists</div>
<div class="code-block">
<span class="comment">// Check if element has a class</span>
<span class="keyword">if</span> (element.classList.<span class="function">contains</span>(<span class="string">'highlight'</span>)) {
console.<span class="function">log</span>(<span class="string">'Element has highlight class'</span>);
}
</div>
<div class="code-title">6. Replace a Class</div>
<div class="code-block">
<span class="comment">// Replace old class with new class</span>
element.classList.<span class="function">replace</span>(<span class="string">'old-class'</span>, <span class="string">'new-class'</span>);
</div>
<div class="code-title">7. Work with Multiple Elements</div>
<div class="code-block">
<span class="comment">// Select all elements with a class</span>
<span class="keyword">const</span> boxes = document.<span class="function">querySelectorAll</span>(<span class="string">'.small-box'</span>);
<span class="comment">// Add class to all elements</span>
boxes.<span class="function">forEach</span>(<span class="keyword">function</span>(box) {
box.classList.<span class="function">add</span>(<span class="string">'active'</span>);
});
<span class="comment">// Or using arrow function</span>
boxes.<span class="function">forEach</span>(box => box.classList.<span class="function">add</span>(<span class="string">'active'</span>));
</div>
</div>
<div class="info-box">
<h3>
<ion-icon name="information-circle-outline"></ion-icon>
classList API Methods
</h3>
<ul>
<li><strong>add()</strong> - Adds one or more classes to an element</li>
<li><strong>remove()</strong> - Removes one or more classes from an element</li>
<li><strong>toggle()</strong> - Toggles a class on or off</li>
<li><strong>contains()</strong> - Checks if element has a specific class</li>
<li><strong>replace()</strong> - Replaces an existing class with a new one</li>
</ul>
</div>
<div class="info-box">
<h3>
<ion-icon name="bulb-outline"></ion-icon>
Best Practices
</h3>
<ul>
<li>Use <strong>classList</strong> instead of className for better control</li>
<li>classList methods don't throw errors if class doesn't exist</li>
<li>You can add/remove multiple classes in a single call</li>
<li>Always check browser support for older browsers (IE10+)</li>
<li>Use meaningful class names that describe the state or style</li>
<li>Combine with CSS transitions for smooth animations</li>
</ul>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
min-height: 100vh;
padding: 20px;
}
.container {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: 50px 40px;
max-width: 1100px;
margin: 0 auto;
}
h1 {
font-size: 32px;
color: #333;
margin-bottom: 10px;
text-align: center;
font-weight: 600;
}
.subtitle {
color: #666;
font-size: 15px;
margin-bottom: 40px;
text-align: center;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.demo-card {
background: #f8f9fa;
border-radius: 15px;
padding: 25px;
}
.demo-card h2 {
font-size: 20px;
color: #f5576c;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.demo-box {
background: white;
border: 2px dashed #ddd;
border-radius: 12px;
padding: 30px;
text-align: center;
margin-bottom: 15px;
transition: all 0.4s ease;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.demo-box p {
color: #666;
font-size: 15px;
margin-bottom: 10px;
}
/* Dynamic classes */
.highlight {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
border-color: #f5576c;
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(245, 87, 108, 0.3);
}
.highlight p {
color: white;
}
.bordered {
border: 4px solid #f5576c;
border-style: solid;
}
.rounded {
border-radius: 50px;
}
.shadow {
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.animated {
animation: bounce 0.6s ease;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-15px); }
50% { transform: translateY(0); }
75% { transform: translateY(-8px); }
}
.rotating {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.button-group {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.btn {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
border: none;
border-radius: 10px;
padding: 10px 18px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 6px;
flex: 1;
justify-content: center;
min-width: 100px;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(245, 87, 108, 0.4);
}
.btn-small {
padding: 8px 14px;
font-size: 12px;
min-width: 80px;
}
.btn-secondary {
background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
}
.code-section {
background: #f8f9fa;
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
}
.code-section h2 {
font-size: 24px;
color: #f5576c;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 20px;
border-radius: 10px;
font-family: 'Courier New', monospace;
font-size: 13px;
overflow-x: auto;
margin: 15px 0;
line-height: 1.8;
}
.code-block .comment {
color: #6272a4;
}
.code-block .keyword {
color: #ff79c6;
}
.code-block .function {
color: #50fa7b;
}
.code-block .string {
color: #f1fa8c;
}
.code-title {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 25px 0 10px;
}
.info-box {
background: #fff0f5;
border-left: 4px solid #f5576c;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.info-box h3 {
color: #f5576c;
margin-bottom: 12px;
font-size: 18px;
display: flex;
align-items: center;
gap: 8px;
}
.info-box ul {
margin-left: 20px;
color: #555;
line-height: 1.8;
}
.status-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
margin-top: 10px;
}
.status-active {
background: #d4edda;
color: #155724;
}
.status-inactive {
background: #f8d7da;
color: #721c24;
}
.multi-demo {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 15px;
margin: 20px 0;
}
.small-box {
background: white;
border: 2px solid #ddd;
border-radius: 10px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
font-weight: 600;
color: #666;
}
.small-box:hover {
border-color: #f5576c;
}
.small-box.active {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
border-color: #f5576c;
transform: scale(1.05);
}
@media (max-width: 768px) {
.container {
padding: 30px 20px;
}
h1 {
font-size: 26px;
}
.demo-grid {
grid-template-columns: 1fr;
}
.button-group {
flex-direction: column;
}
.btn {
width: 100%;
}
}
// Demo 1: Basic Operations
const box1 = document.getElementById('box1');
const status1 = document.getElementById('status1');
const add1 = document.getElementById('add1');
const remove1 = document.getElementById('remove1');
const toggle1 = document.getElementById('toggle1');
function updateStatus() {
if (box1.classList.contains('highlight')) {
status1.textContent = 'Active';
status1.className = 'status-badge status-active';
} else {
status1.textContent = 'Inactive';
status1.className = 'status-badge status-inactive';
}
}
add1.addEventListener('click', () => {
box1.classList.add('highlight');
updateStatus();
});
remove1.addEventListener('click', () => {
box1.classList.remove('highlight');
updateStatus();
});
toggle1.addEventListener('click', () => {
box1.classList.toggle('highlight');
updateStatus();
});
// Demo 2: Multiple Classes
const box2 = document.getElementById('box2');
document.getElementById('addBordered').addEventListener('click', () => {
box2.classList.add('bordered');
});
document.getElementById('addRounded').addEventListener('click', () => {
box2.classList.add('rounded');
});
document.getElementById('addShadow').addEventListener('click', () => {
box2.classList.add('shadow');
});
document.getElementById('addAll').addEventListener('click', () => {
box2.classList.add('bordered', 'rounded', 'shadow', 'animated');
});
document.getElementById('removeAll').addEventListener('click', () => {
box2.classList.remove('bordered', 'rounded', 'shadow', 'animated');
});
// Demo 3: Conditional Check
const box3 = document.getElementById('box3');
document.getElementById('check3').addEventListener('click', () => {
if (box3.classList.contains('highlight')) {
alert('✓ Box 3 has the "highlight" class');
} else {
alert('✗ Box 3 does NOT have the "highlight" class');
}
});
document.getElementById('toggleHighlight').addEventListener('click', () => {
box3.classList.toggle('highlight');
});
// Multiple Elements Demo
const smallBoxes = document.querySelectorAll('.small-box');
smallBoxes.forEach(box => {
box.addEventListener('click', () => {
box.classList.toggle('active');
});
});
document.getElementById('selectAll').addEventListener('click', () => {
smallBoxes.forEach(box => {
box.classList.add('active');
});
});
document.getElementById('deselectAll').addEventListener('click', () => {
smallBoxes.forEach(box => {
box.classList.remove('active');
});
});
No comments yet. Be the first!