خصوصیت element.classList

مثال (خصوصیت element.classList)

اضافه کردن یک کلاس به عنصر <div>:

document.getElementById("myDIV").classList.add("mystyle");

خودتان امتحان کنید »

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

خصوصیت classList نام کلاس(های)یک عنصر را مانند یک شیء DOMTokenList برمی گرداند.

از این خصوصیت می توان برای اضافه و حذف کردن کلاس های css از یک عنصر، استفاده کنید.

خصوصیت clearList "فقط خوادنی" می باشد اما شما می توانید آن را با استفاده از متد های ()add و ()remove تغییر دهید.

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

اعداد داخل جدول زیر نشان دهنده ی اولین ورژن مرورگری است که به طور کامل از این خصوصیت پشتیبانی می کند.

متد
classList	8.0	10.0	3.6	5.1	11.5

نحوه استفاده

element.classList

Properties

متد	توضیحات
length	تعداد کلاس های لیست را برمی گرداند. این خصوصیت فقط خواندنی است.

متد

توضیحات

length

تعداد کلاس های لیست را برمی گرداند.

این خصوصیت فقط خواندنی است.

Methods

متد	توضیحات
add(class1, class2, ...)	اضافه کردن یک یا چند نام کلاس به یک عنصر. در صورتی که کلاس مشخص شده قبلا موجود باشد، کلاس مورد نظر اضافه نخواهد شد.
contains(class)	یک مقدار بولی را برمی گرداند که مشخص می کند که آیا یک عنصر دارای یک نام کلاس مشخص هست یا نه. مقادیر امکان پذیر: true: عنصر مورد نظر شامل کلاس مشخص شده می باشد. false: عنصر مورد نظر، شامل نام کلاس مشخص شده نیست.
item(index)	برگرداندن نام کلاس مورد نظر با یک اندیس مشخص از عنصر. اندیس از 0 شروع می شود. در صورتی که اندیس خارج از محدوده باشد، null برگردانده نخواهد شد.
remove(class1, class2, ...)	یک یا چند نام کلاس را از یک عنصر حذف می کند. نکته: حذف کردن یک کلاس که وجود ندارد، باعث ایجاد خطا نمی شود.
toggle(class, true\|false)	ایجاد دو حالت برای یک نام کلاس در یک عنصر. پارامتر اول کلاس مورد نظر از عنصر را حذف می کند و false را برمی گرداند. در صورتی که کلاس مورد نظر وجود نداشته باشد، به عنصر اضافه می شود و مقدارtrue را برمی گرداند. پارامتر اختیاری دوم یک مقداربولی می باشد که کلاس را مجبور می کند تا اضافه شود یا حذف شود،بدون در نظر گرفتن اینکه آیا قبلا وجود داشته ست یا نه. بعنوان مثال: حذف کردن یک کلاس: (element.classList.toggle("classToRemove", false اضافه کردن یک کلاس: (element.classList.toggle("classToAdd",true نکته: پارامتر دوم در اینترنت اکسپلورر و اپرا 12 و ورژن های قبلی آن پشتیبانی نمی شود.

جزئیات تکنیکی

مقدار برگشتی	یک DOMTokenList که شامل یک لیست از کلاس های یک عنصر است

مثال - خودتان امتحان کنید

مثال (خصوصیت element.classList)

اضافه کردن کلاس های چند گانه به یک عنصر <div>:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

خودتان امتحان کنید »

مثال (خصوصیت element.classList)

حذف کردن یک کلاس از یک عنصر <dv>:

document.getElementById("myDIV").classList.remove("mystyle");

خودتان امتحان کنید »

مثال (خصوصیت element.classList)

حذف کردن کلاس های چند گانه از یک عنصر <div>:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

خودتان امتحان کنید »

مثال (خصوصیت element.classList)

ایجاد یک toggle بین دو کلاس برای یک عنصر <div>:

document.getElementById("myDIV").classList.toggle("newClassName");

خودتان امتحان کنید »

مثال (خصوصیت element.classList)

به دست آوردن نام کلاس از یک عنصر <div>:

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>

var x = document.getElementById("myDIV").classList;

خروجی x در کد بالا

mystyle anotherClass thirdClass

خودتان امتحان کنید »

مثال (خصوصیت element.classList)

فهمیدن اینکه یک عنصر <div> دارای چه تعداد کلاس می باشد:

var x = document.getElementById("myDIV").classList.length;

خروجی x در کد بالا

خودتان امتحان کنید »

مثال (خصوصیت element.classList)

به دست آوردن اولین نام کلاس در یک عنصر(در اندیس 0) <div>:

var x = document.getElementById("myDIV").classList.item(0);

خروجی x در کد بالا

mystyle

خودتان امتحان کنید »

مثال (خصوصیت element.classList)

فهمیدن اینکه آیا یک عنصر، دارای کلاس mystyle هست یا نه:

var x = document.getElementById("myDIV").classList.contains("mystyle");

خروجی x در کد بالا

true

خودتان امتحان کنید »

مثال (خصوصیت element.classList)

فهمیدن اینکه آیا یک عنصر دارای کلاس "mystyle" می باشد یا نه. در این صورت نام کلاس را حذف می کند.

var x = document.getElementById("myDIV");

if (x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
}

خودتان امتحان کنید »