آموزش ویژگی className در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی className در DOM جاوااسکریپت با من همراه باشید.

ویژگی className در DOM جاوااسکریپت

Free-Learn

ویژگی className در DOM جاوااسکریپت

با استفاده از ویژگی className میتونیم هم نام کلاس ( یا مقدار کلاس ) یک عنصر رو بدست آوریم و هم میتونیم یک نام یا مقدار کلاس جدید برای عنصر ( یا تگ ) تعریف نماییم.

این ویژگی شبیه ویژگی classList می باشد و درکل کارشون یکیه، ولی classList حرفه ای تره.

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

Free-Learn

مثال از این ویژگی

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

مثال شماره ۱ : بدست آوردن لیست کامل کلاس های موجود در تگ H2

امتحان کنید

مثال شماره ۲ : اضافه کردن کلاس جدید به تگ

امتحان کنید

مثال شماره ۳ : اضافه کردن چندین کلاس بصورت همزمان به تگ

امتحان کنید

مثال شماره ۴ : حذف کردن کل کلاس های تگ

امتحان کنید

مثال شماره ۵ : از قبل خوده تگ کلاس داره، حال ما میخوایم کلاس جدید اضافه کنیم ( یعنی اون قبلی باشه جدیدم بیاد کنارش )

امتحان کنید

مثال شماره ۶ : جابه جایی بین ۲ کلاس ( یعنی وقتی بروی دکمه کلیک میشه یه کلاس اعمال میشه و برای بار دوم که کلیک بشه دوباره یه کلاس دیگه، دیگه همینجور بینشون جابه جا میشه )

امتحان کنید

Free-Learn

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

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

نام ویژگی Chrome Firefox Opera Safari IE
className بله بله بله بله بله

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.

  • برای دریافت / گرفتن نام کلاس

  • برای ست / تنظیم کردن یک عدد نام کلاس

  • برای ست / تنظیم کردن چندین کلاس بصورت همزمان

  • برای حذف کردن کلاس

 

Free-Learn

نکات و توضیحات

  • نکته یا توضیح خاصی وجود ندارد.

Free-Learn

دریافت PDF یا پرینت این مطلب