HTML DOM Element classList अधिरेखा

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

classList अधिरेखा वापस एलिमेंट के CSS क्लास नाम देता है。

classList अधिरेखा वापस DOMTokenList देता है。

उदाहरण

उदाहरण 1

"myStyle" की क्लास को एलिमेंट में जोड़ें:

const list = element.classList;
list.add("myStyle");

अपने आप साबित करें

उदाहरण 2

"myStyle" की क्लास को एलिमेंट से हटाए।

const list = element.classList;
list.remove("myStyle");

अपने आप साबित करें

उदाहरण 3

"myStyle" के खुलने और बंद होने को टॉगल करें:

const list = element.classList;
list.toggle("myStyle");

अपने आप साबित करें

सूचना:पृष्ठ के नीचे अधिक उदाहरण दिए गए हैं。

व्याकरण

element.classList

वापसी मूल्य

वर्ग वर्णन
वस्तु DOMTokenList. एलिमेंट की क्लास नाम सूची。

नोट:नोट: classList अधिरेखा लिखित है, लेकिन आप नीचे सूचीबद्ध विधियों का उपयोग करके सूची से जोड़े, टॉगल या हटाए जा सकती है:

classList अधिरेखा और विधियाँ

नाम वर्णन
add() एक या अनेक टोकन को सूची में जोड़े।
contains() सूची में किसी वर्ग का होना तो true बहार देता है。
entries() सूची से चाइन/मूल्य के आधार पर इटरेटर बहार देता है。
forEach() सूची में हर टोकन पर कॉलबैक फ़ंक्शन चलाएं।
item() विशिष्ट सूचकांक से टोकन वापस करें。
keys() सूची में बाल्यांकों के साथ इटरेटर वापस करें。
length सूची में टोकनों की संख्या वापस करें。
remove() सूची से एक या अधिक टोकन हटाएं。
replace() सूची में टोकन को बदलें。
supports() यदि टोकन प्रतिबंधित टोकनों में से एक है, तो true वापस करें。
toggle() सूची में टोकनों के बीच परिवर्तन करें。
value टोकन सूची को स्ट्रिंग रूप में वापस करें。
values() सूची में बाल्यांकों के मूल्यों के साथ इटरेटर वापस करें。

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

उदाहरण 4

एलिमेंट को कई क्लास जोड़ें:

element.classList.add("myStyle", "anotherClass", "thirdClass");

अपने आप साबित करें

उदाहरण 5

एलिमेंट से कई क्लास हटाएं:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

अपने आप साबित करें

उदाहरण 6

एलिमेंट कितनी क्लास नाम है?

let numb = element.classList.length;

अपने आप साबित करें

उदाहरण 7

एलिमेंट "myDIV" की क्लास नाम प्राप्त करें:

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

अपने आप साबित करें

उदाहरण 8

एलिमेंट की पहली क्लास प्राप्त करें:

let className = element.classList.item(0);

अपने आप साबित करें

उदाहरण 9

एलिमेंट कितनी "myStyle" क्लास के साथ है?

let x = element.classList.contains("myStyle");

अपने आप साबित करें

उदाहरण 10

यदि एलिमेंट "myStyle" क्लास के साथ है, तो "anotherClass" हटाएं:

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

अपने आप साबित करें

उदाहरण 11

क्लासों के बीच परिवर्तन करके ड्रॉपडाउन बटन बनाएं:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

अपने आप साबित करें

उदाहरण 12

स्टिकी नाविका बार बनाएं:

// नाविका बार प्राप्त करें
const navbar = document.getElementById("navbar");
// नाविका बार की स्थिति प्राप्त करें
const sticky = navbar.offsetTop;
// आप उसकी स्क्रॉल स्थिति तक पहुंचने पर sticky वर्ग नाम नवीनतम नाविका बार को जोड़ें
// गलत स्क्रॉल स्थिति से इसे मिटाएं
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

अपने आप साबित करें

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

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

च्रोम आईई एज फायरफॉक्स सफारी ओपेरा
च्रोम आईई एज फायरफॉक्स सफारी ओपेरा
समर्थन 9-11 समर्थन समर्थन समर्थन समर्थन

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

CSS शिक्षा：CSS व्याकरण

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

DOMTokenList ऑब्जेक्ट

className गुण

getElementsByClassName() मथड़ा

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