JavaScript से एलिमेंट में क्लास नाम जोड़ें

JavaScript में classList.add() मेथड का उपयोग करके किसी HTML एलिमेंट में एक या अधिक CSS क्लास नाम डायनामिकली जोड़े जा सकते हैं। यह स्टाइल बदलने का आधुनिक, अनुशंसित तरीका है।

उदाहरण

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> 
    .newStyle { 
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 
        width: 100%; padding: 25px; 
        background: linear-gradient(135deg, #9350ff, #6f42c1); 
        color: white; font-size: 25px; 
        box-sizing: border-box; text-align: center; 
        border-radius: 8px; transition: all 0.3s; 
    } 
    button { padding: 12px 24px; background: #333; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; } 
    button:hover { background: #555; } 
    #sampleDiv { padding: 20px; background: #f8f9fa; border: 2px dashed #ccc; border-radius: 8px; margin: 20px 0; transition: all 0.3s; } 
</style> </head> <body> 
<h1>JavaScript से क्लास नाम जोड़ना</h1> 
<button class="btn">क्लास जोड़ें</button> 
<h2>ऊपर दिए गए बटन पर क्लिक करके नीचे दिए गए DIV में क्लास जोड़ें</h2> 
<div id="sampleDiv">यह एक DIV एलिमेंट है।</div> 
<script> 
    document.querySelector(".btn").addEventListener("click", addClassName); 
    
    function addClassName() { 
        const element = document.getElementById("sampleDiv"); 
        element.classList.add("newStyle"); 
    } 
</script> </body> </html>

आउटपुट

प्रारंभ में: साधारण ग्रे बॉक्स

बटन क्लिक के बाद: बैंगनी ग्रेडिएंट बैकग्राउंड, सफेद टेक्स्ट, केंद्रित, बड़ा फॉन्ट

classList API पूर्ण गाइड

मेथड	विवरण	उदाहरण
`add(...classes)`	क्लास जोड़ें (डुप्लिकेट नहीं)	`el.classList.add("a", "b")`
`remove(...classes)`	क्लास हटाएं	`el.classList.remove("a")`
`toggle(class[, force])`	टॉगल करें / बलपूर्वक जोड़ें/हटाएं	`el.toggle("active", true)`
`contains(class)`	क्लास मौजूद है?	`el.classList.contains("active")`
`replace(old, new)`	क्लास बदलें	`el.replace("old", "new")`
`item(index)`	इंडेक्स द्वारा क्लास प्राप्त करें	`el.item(0)`
`length`	क्लास की संख्या	`el.classList.length`
`forEach()`	सभी क्लास पर पुनरावृत्ति	`el.classList.forEach(c => ...)`

पुराना तरीका (className) - टालें

// पुराना - त्रुटि-प्रवण
element.className += " newClass"; // स्पेस मिस होने पर टूटता है
element.className = "newClass";   // सभी मौजूदा क्लास मिटा देता है

// आधुनिक - सुरक्षित
element.classList.add("newClass");

बहु-क्लास टॉगल पैटर्न

// लोडिंग स्टेट
btn.classList.add("loading");
btn.disabled = true;

// बाद में
btn.classList.remove("loading");
btn.classList.add("success");
setTimeout(() => btn.classList.remove("success"), 2000);