آموزش ویژگی classList در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی classList در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی classList در DOM جاوااسکریپت
با استفاده از ویژگی classList میتونیم به کلاس های یک عنصر دسترسی پیدا نماییم، و نام اون کلاس هارو با استفاده از متدهایی که این ویژگی داره حالا یا اضافه کنیم یا حذف و..
با استفاده از این ویژگی میتوان به راحتی یک یا چندین کلاس برای یک تگ تعریف و یا حذف کرد.
یه ویژگی بنام className هم داریم که با استفاده از اون میشه نام کلاس یک عنصر رو برگشت داد یا براش کلاس جدید تعریف کرد، کلی بخوایم بگیم ویژگی classList و className شبیه بهمدیگه هستن و یه کارو میکنن ولی ویژگی 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"); } |
