ویژگی classList HTML DOM Element

تعریف و استفاده

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() {
  اگر (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

آزمایش کنید

پشتیبانی مرورگر

همه مرورگرها از آن پشتیبانی می‌کنند element.classList:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی 9-11 پشتیبانی پشتیبانی پشتیبانی پشتیبانی

صفحات مرتبط

آموزش CSS:زبان CSS

دستورالعمل CSS:انتخابگر .class CSS

مجموعه DOMTokenList

ویژگی className

مетод getElementsByClassName()

اجزای Style HTML DOM