آموزش ویژگی classList در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی classList در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی classList در DOM جاوااسکریپت
با استفاده از ویژگی classList
میتونیم به کلاس های یک عنصر دسترسی پیدا نماییم، و نام اون کلاس هارو با استفاده از متدهایی که این ویژگی داره حالا یا اضافه کنیم یا حذف و..
مقدار برگشتی | لیستی از نام کلاس های یک عنصر رو برمیگردونه |
---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : بدست آوردن لیست کامل کلاس های موجود در یک تگ
1 2 3 4 5 6 7 8 9 10 |
<script> function get(){ var myH2 , result; myH2 = document.getElementById("myh2").classList; result = document.getElementById("Result"); result.innerHTML = myH2; } </script> |
مثال شماره ۲ : با کلیک بروی یک دکمه، کلاس free-learn به تگ اضافه میشه و با کلیک بروی یک دکمه دیگه، این کلاس حذف میشه.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> function add(){ var myH2; myH2 = document.getElementById("myh2"); myH2.classList.add("free-learn"); } function del(){ var myH2; myH2 = document.getElementById("myh2"); myH2.classList.remove("free-learn"); } </script> |
مثال شماره ۳ : جابه جایی یا toggle ( وقتی روی دکمه کلیک میشه کلاس اضافه میشه و وقتی دوباره رو همون دکمه کلیک میشه کلاس حذف میشه دیگه تا هرچقدر که کاربر بروی دکمه کلیک کنه )
1 2 3 4 5 6 7 8 9 |
<script> function toggle(){ var myH2; myH2 = document.getElementById("myh2"); myH2.classList.toggle("free-learn"); } </script> |
مثال شماره ۴ : یک تگ ۳ تا کلاس داره ما میخوایم نام کلاس دومی ( ۲ ) رو بدست آوریم. ( با استفاده از متد item و شماره ایندکس )
1 2 3 4 5 6 7 8 9 10 |
<script> function get(){ var myH2 , result; myH2 = document.getElementById("myh2").classList.item(1); result = document.getElementById("Result"); result.innerHTML = myH2; } </script> |
مثال شماره ۵ : نحوه استفاده از متد contains ( میره چک میکنه که ببینه آیا مثلا فلان نام کلاس در بین نام های کلاس موجود در تگ وجود داره یا نه )
1 2 3 4 5 6 7 8 9 10 |
<script> function get(){ var myH2 , result; myH2 = document.getElementById("myh2").classList.contains("test3"); result = document.getElementById("Result"); result.innerHTML = myH2; } </script> |
مثال شماره ۶ : اضافه کردن همزمان ۳ نام کلاس به تگ
1 2 3 4 5 6 7 8 9 |
<script> function add(){ var myH2; myH2 = document.getElementById("myh2"); myH2.classList.add("f1","f2","f3"); } </script> |
مثال شماره ۷ : حذف کردن همزمان ۳ نام کلاس از تگ
1 2 3 4 5 6 7 8 9 |
<script> function del(){ var myH2; myH2 = document.getElementById("myh2"); myH2.classList.remove("f1","f2","f3"); } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
classList | ۸٫۰ | ۳٫۶ | ۱۱٫۵ | ۵٫۱ | ۱۰٫۰ |
Free-Learn
شکل نوشتاری ویژگی classList در DOM جاوااسکریپت
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
1 |
Element.classList [ Property ] یا [ Method ]; |
Free-Learn
ویژگی ها
در جدول زیر میتوانید ویژگی های قابل استفاده در classList رو مشاهده نمایید.
مقدار | توضیح |
---|---|
length | برای بدست آوردن تعداد ( کل ) کلاس های موجود در یک عنصر ( مثال ) |
Free-Learn
متدها
در جدول زیر میتوانید متدهای قابل استفاده در classList رو مشاهده نمایید.
مقدار | توضیح | ||
---|---|---|---|
add(“class1”) | برای اضافه کردن یک یا چندین نام کلاس * برای اضافه کردن چندین کلاس بصورت همزمان
* اگه نام کلاس از قبل وجود داشته باشه دیگه اضافه نمیشه |
||
contains(“class”) | مشخص میکند که آیا کلاس های یک تگ ، شامل یک نام مشخص شده می باشد یا خیر |
||
item(“index”) | برای بدست آوردن نام کلاس بر اساس شماره ایندکس یا جایگاه | ||
remove(“class1”) | برای حذف کردن یک یا چندین نام کلاس * برای حذف کردن چندین کلاس بصورت همزمان
* اگه نام کلاس وجود نداشته باشه هیچ ارور یا خطایی نمیده |
||
toggle(“class”) | برای جابه جایی بین نام کلاس ها اگه کلاس وجود نداشت ، اضافش میکنه و true برمیگردونه اگه کلاس وجود داشت حذفش میکنه و false برمیگردونه |
Free-Learn
نکات و توضیحات
- با استفاده از متد
add
، اگه کلاس از قبل وجود داشته باشه، دیگه اضافش نمیکنه. - با استفاده از متد
remove
در هنگام حذف یک نام کلاس، اگه کلاس از قبل وجود نداشته باشه هیچ ارور یا خطایی داده نمیشه. - با استفاده از متد
item
میتوان به نام کلاس های یک عنصر بر اساس شماره ایندکس ( یا شماره جایگاه دسترسی پیدا کرد ) ( همیشه شماره ایندکس از ۰ شروع میشه ) - برای اضافه یا حذف کردن چندین کلاس بصورت همزمان، باید هر یک از کلاس هارو درون دابل کوتیشن ” ” گذاشت و بینشون کاما , قرار داد.
Free-Learn
مثال های بیشتر
مثال شماره ۱ : ایجاد حالت شب یا ( Night Mode ) – دکمه ی حالت شب بصورت فیکس در سمت چپ گوشه پایین صفحه قرار دارد.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* دکمه حالت شب */ a.btn-night{ position:fixed; left:10px; bottom:10px; } /* استایل برای حالت شب */ body.night-mode{ background-color:#2f2d2d; color:#fff; } body.night-mode a{ color:yellow; } |
1 2 3 4 5 |
function toggle_mode(){ var mybody; mybody = document.getElementById("MyBody"); mybody.classList.toggle("night-mode"); } |