HTML DOM Element className विशेषता

परिभाषा और उपयोग

className विशेषता सेट करना या वापस करना एलिमेंट की class विशेषता。

और देखें:

Element classList विशेषता

Document getElementsByClassName() विधि

एचटीएमएल डॉम स्टाइल ऑब्जैक्ट

उदाहरण

उदाहरण 1

एलिमेंट की class विशेषता सेट करें:

element.className = "myStyle";

आप खुद सबसे प्रयोग करें

उदाहरण 2

"myDIV" की class विशेषता प्राप्त करें:

let value = document.getElementById("myDIV").className;

आप खुद सबसे प्रयोग करें

उदाहरण 3

दोनों क्लास नामों के बीच टच बदलें:

if (element.className == "myStyle") {
  element.className = "newStyle";
} else {
  element.className = "myStyle";
}

आप खुद सबसे प्रयोग करें

सूचना:पाने के नीचे अधिक उदाहरण मिलेंगे。

व्याकरण

className विशेषता वापस करें:

HTMLElementObject.className

className विशेषता सेट करें:

HTMLElementObject.className = class

विशेषता मूल्य

मूल्य वर्णन
class

एलेमेंट के वर्ग नाम

कई वर्गों को खाली जगह से अलग करके विभाजित करें, जैसे "test demo"。

प्रतिफलन

प्रकार वर्णन
शब्द एलेमेंट के वर्ग, या खाली जगह से अलग वर्गों की सूची

और अधिक उदाहरण

उदाहरण 4

पहले <div> एलेमेंट के class विशेषता को प्राप्त करें (अगर होता है):

let value = document.getElementsByTagName("div")[0].className;

आप खुद सबसे प्रयोग करें

उदाहरण 5

कई वर्गों वाले class विशेषता प्राप्त करें:

<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

आप खुद सबसे प्रयोग करें

उदाहरण 6

समान class विशेषता को नए class विशेषता से ओवरराइड करें:

element.className = "newClassName";

आप खुद सबसे प्रयोग करें

उदाहरण 7

अस्तित्वातमक मूल्य को ओवरराइड करने के लिए, खाली जगह और नए वर्ग जोड़ें:

element.className += " class1 class2";

आप खुद सबसे प्रयोग करें

उदाहरण 8

यदि "myDIV" में "myStyle" वर्ग है, तो फ़ॉन्ट आकार को बदलें:

const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
  elem.style.fontSize = "30px";
}

आप खुद सबसे प्रयोग करें

उदाहरण 9

यदि आप 50 पिक्सल ऊपर गेंद करें, तो "test" वर्ग जोड़ा जाएगा:

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

आप खुद सबसे प्रयोग करें

ब्राउज़र समर्थन

सभी ब्राउज़र समर्थन करते हैं element.className：

च्रोम आईई एज फायरफॉक्स सैफारी ऑपेरा
च्रोम आईई एज फायरफॉक्स सैफारी ऑपेरा
समर्थन समर्थन समर्थन समर्थन समर्थन समर्थन

संबंधित पृष्ठ

CSS शिक्षाःCSS गणित

CSS संदर्भ दस्तावेज़ःCSS .class चयनकर्ता