एचटीएमएल डोम वर्गनाम संपत्ति

<घंटा/>

HTML DOM क्लासनाम प्रॉपर्टी का इस्तेमाल HTML एलिमेंट को css क्लास असाइन करने के लिए किया जाता है। क्लासनाम संपत्ति का उपयोग किसी तत्व के वर्ग नाम विशेषता मान को सेट करने या वापस करने के लिए किया जाता है। यदि कोई वर्ग HTML तत्व से संबद्ध नहीं है, तो एक खाली स्ट्रिंग लौटा दी जाती है। हम इस गुण का उपयोग करके एक तत्व के साथ एक वर्ग का नाम बदल सकते हैं -

सिंटैक्स

−

. के लिए वाक्य रचना निम्नलिखित है

क्लासनाम प्रॉपर्टी सेट करना -

HTMLElementObject.className = class;

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

उदाहरण

आइए हम HTML DOM क्लासनाम प्रॉपर्टी का एक उदाहरण देखें -

<!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>Click the below button to display the class attribute value of the 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>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

एचटीएमएल डोम वर्गनाम संपत्ति

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

एचटीएमएल डोम वर्गनाम संपत्ति

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

हमने "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 () विधि का उपयोग करके

तत्व प्राप्त करेगी और

तत्व पर className गुण का उपयोग करके इसके सभी वर्ग नाम प्राप्त करेगी और इसे चर x को असाइन करेगी। तब वर्ग के नाम पैराग्राफ में "नमूना" आईडी के साथ प्रदर्शित किए जाते हैं -

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

हैं