एचटीएमएल डोम एलिमेंट क्लासलिस्ट
❮ तत्व वस्तुउदाहरण
किसी तत्व में "myStyle" वर्ग जोड़ें:
element.classList.add("myStyle");
किसी तत्व से "myStyle" वर्ग निकालें:
element.classList.remove("myStyle");
किसी तत्व के लिए दो वर्गों के बीच टॉगल करें:
element.classList.toggle("newStyle");
नीचे और अधिक उदाहरण।
परिभाषा और उपयोग
संपत्ति किसी तत्व के classList
CSS वर्गनाम लौटाती है।
classList
संपत्ति एक DOMTokenList ऑब्जेक्ट देता है ।
संपत्ति केवल पढ़ने के classList
लिए है, लेकिन आप सीएसएस कक्षाओं को जोड़ने या हटाने के लिए ऐड () और निकालें () विधियों का उपयोग कर सकते हैं।
ध्यान दें
classList
संपत्ति एक तत्व पर सीएसएस कक्षाओं को जोड़ने, हटाने और टॉगल करने के लिए उपयोगी है ।
यह सभी देखें:
वाक्य - विन्यास
element.classList
सम्पत्ति की कीमत
Value | Description |
length | The number of classes in the list. This property is read-only. |
तरीकों
Method | Description |
add(class1, class2, ...) |
Adds one or more classes. |
contains(class) |
Returns true if an element has the class, otherwise false .
|
item(index) | Returns the class name with a specified index. Index starts at 0. Returns null if the index is out of range. |
remove(class1, class2, ...) | Removes one or more classes from an element. Removing a class that does not exist, does NOT throw an error. |
toggle(class, true|false) | Toggles between a class for an element. It removes the class and returns false .If the class does not exist, it adds the class and returns true .The optional second parameter is a boolean that forces the class to be added or removed, regardless of whether or not it already exists. The second parameter is not supported in Internet Explorer 11 or earlier. |
प्रतिलाभ की मात्रा
Type | Description |
Object | A DOMTokenList. A list of the class names of an element. |
और ज्यादा उदाहरण
एक तत्व में कई वर्ग जोड़ें:
element.classList.add("myStyle", "anotherClass", "thirdClass");
एक तत्व से कई वर्ग निकालें:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
तत्व के कितने वर्ग नाम हैं:
let numb = element.classList.length;
"MyDIV" तत्व के वर्ग नाम प्राप्त करें:
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;
किसी तत्व का प्रथम वर्ग प्राप्त करें:
let className = element.classList.item(0);
क्या किसी तत्व में "myStyle" वर्ग है?
let x = element.classList.contains("myStyle");
यदि किसी तत्व में "myStyle" वर्ग है, तो "अन्य क्लास" को हटा दें।
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
ड्रॉपडाउन बटन बनाने के लिए कक्षाओं के बीच टॉगल करें:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
एक चिपचिपा नेविगेशन बार बनाएं:
// Get the navbar
var navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
ब्राउज़र समर्थन
element.classList
सभी ब्राउज़रों में समर्थित है:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 10-11 | Yes | Yes | Yes | Yes |
तत्व वस्तु