ویژگی classList HTML DOM Element
- پچھلے پہلہ بچوں
- آئندہ پہلہ className
- درجہ بالا لوگار HTML DOM Elements اُبجیکٹ
تعریف و استفاده
classList ویژگی بازمیگرداند نامهای کلاس عنصر.
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");
توجه داشته باشید که:مثالهای بیشتری در پایین صفحه ارائه شده است.
جملات
عنصر.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 | پشتیبندگی | پشتیبندگی | پشتیبندگی | پشتیبندگی |
- پچھلے پہلہ بچوں
- آئندہ پہلہ className
- درجہ بالا لوگار HTML DOM Elements اُبجیکٹ
