این آموزش در تاریخ ۱۴۰۱/۰۵/۰۲ آپدیت شده است.
آموزش ویژگی className در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی className در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی className در DOM جاوااسکریپت
با استفاده از ویژگی className میتونیم هم نام + مقدار کلاس یک تگ رو بدست آوریم و هم میتونیم یک نام + مقدار کلاس جدید برای تگ تعریف نماییم.
این ویژگی شبیه ویژگی classList می باشد و درکل کارشون یکیه، ولی classList حرفه ای تره، پیشنهادم استفاده از classList هستش.
| مقدار برگشتی | لیستی از نام کلاس های موجود در یک تگ رو برگشت میده |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : بدست آوردن لیست کامل کلاس های موجود در تگ H2
|
1 2 3 4 5 6 7 |
<script> function Get(){ MyClassName = MyH2.className; } </script> |
مثال شماره ۲ : اضافه کردن کلاس جدید به تگ
|
1 2 3 4 5 6 7 |
<script> function Set(){ document.getElementById("MyH2").className = "free-learn"; } </script> |
مثال شماره ۳ : اضافه کردن چندین کلاس بصورت همزمان به تگ
|
1 2 3 4 5 6 7 |
<script> function Set(){ document.getElementById("MyH2").className = "MyBG MyColor MyAlign"; } </script> |
مثال شماره ۴ : حذف کردن کل کلاس های تگ
|
1 2 3 4 5 6 7 |
<script> function Del(){ document.getElementById("MyH2").className = ""; } </script> |
مثال شماره ۵ : از قبل خوده تگ کلاس داره، حال ما میخوایم کلاس جدید اضافه کنیم ( یعنی اون قبلی باشه جدیدم بیاد کنارش )
|
1 2 3 4 5 6 7 8 9 |
<script> function Set(){ var MyTag; MyTag = document.getElementById("MyH2"); MyTag.className = MyTag.className + " MyAlign"; } </script> |
مثال شماره ۶ : جابه جایی بین ۲ کلاس ( یعنی وقتی بروی دکمه کلیک میشه یه کلاس اعمال میشه و برای بار دوم که کلیک بشه دوباره یه کلاس دیگه، دیگه همینجور بین این ۲تا کلاس جابه جا میشه )
این مثال در واقع کاره متد toggle رو انجام میده ( مشاهده مثال از متد toggle )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> function Set(){ var MyTag; MyTag = document.getElementById("MyH2"); if( MyTag.className == "BG-1" ){ MyTag.className ="BG-2"; }else{ MyTag.className ="BG-1"; } } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| className | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
- برای دریافت کل نام کلاس ها
|
1 |
Element.className; |
- برای ست / تنظیم کردن یک عدد نام کلاس
|
1 |
Element.className = "Class_Name"; |
- برای ست / تنظیم کردن چندین نام کلاس بصورت همزمان
|
1 |
Element.className = "Class1 Class2 Class3 ..."; |
- برای حذف کردن کل کلاس ها
|
1 |
Element.className = ""; |
Free-Learn
نکات و توضیحات
- با توجه به حرفه ای بودن ویژگی classList پیشنهاد میکنم و بهتره شماهم از اون استفاده نمایید.
