HTML DOM className प्रॉपर्टी

HTML DOM className प्रॉपर्टी का उपयोग HTML एलिमेंट को एक CSS क्लास असाइन करने के लिए किया जाता है। className प्रॉपर्टी का उपयोग किसी एलिमेंट के क्लास नेम एट्रिब्यूट वैल्यू को सेट या वापस करने के लिए किया जाता है। यदि किसी HTML एलिमेंट के साथ कोई क्लास जुड़ी नहीं है, तो एक खाली स्ट्रिंग वापस की जाती है। हम इस प्रॉपर्टी का उपयोग करके किसी एलिमेंट में मौजूद क्लास नेम को बदल सकते हैं।

सिंटैक्स (Syntax)

className प्रॉपर्टी सेट करने का सिंटैक्स:

HTMLElementObject.className = class;

यहां, class वैल्यू का उपयोग किसी एलिमेंट के क्लास नेम को निर्दिष्ट करने के लिए किया जाता है। एक एलिमेंट के साथ कई क्लासेस जुड़ी हो सकती हैं जो स्पेस से अलग होती हैं।

उदाहरण (Example)

HTML DOM className प्रॉपर्टी का एक उदाहरण:

<!DOCTYPE html> <html> <head> <style> .firstDiv { width: 300px; height: 100px; background-color: lightgreen; } .secondDiv { color: red; border: solid 1px blue; margin-bottom: 9px; } </style> </head> <body> <p>div के क्लास एट्रिब्यूट वैल्यू को प्रदर्शित करने के लिए नीचे दिए गए बटन पर क्लिक करें</p> <div id="myDIV" class="firstDiv secondDiv"> This is a sample div element. </div> <button onclick="getClassName()">GET CLASS</button> <p id="Sample"></p> <script> function getClassName() { var x = document.getElementById("myDIV").className; document.getElementById("Sample").innerHTML = "The classNames with the div element are " + x; } </script> </body> </html>

आउटपुट (Output)

इससे निम्नलिखित आउटपुट प्राप्त होगा:

HTML DOM className प्रॉपर्टी

GET CLASS बटन पर क्लिक करने पर:

HTML DOM className प्रॉपर्टी

उपरोक्त उदाहरण में:

हमने "myDIV" आईडी वाला एक डिव बनाया है और इसमें कुछ टेक्स्ट है:

<div id="myDIV" class="firstDiv secondDiv"> This is a sample div element. </div>

फिर हमने एक GET CLASS बटन बनाया जो क्लिक होने पर getClassName() मेथड को एक्जीक्यूट करेगा:

<button onclick="getClassName()">GET CLASS</button>

getClassName() मेथड getElementById() मेथड का उपयोग करके <div> एलिमेंट को प्राप्त करेगा और <div> एलिमेंट पर className प्रॉपर्टी का उपयोग करके इसके सभी क्लास नेम प्राप्त करेगा और इसे वेरिएबल x में असाइन करेगा। क्लास नेम्स को फिर "Sample" आईडी वाले पैराग्राफ में प्रदर्शित किया जाता है:

function getClassName() { var x = document.getElementById("myDIV").className; document.getElementById("Sample").innerHTML = "The classNames with the div element are " + x; }