illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

HTML5 "classList" API - دستکاری آسان کلاس ها

0 2493 ۳۰ شهریور ۹۳

به نام خدا

با سلام خدمت دوستان عزیز سون‌لرنی.

html5js_ft

اغلب هنگام ساخت یک برنامه یا جلوه برای قسمت های مختلف صفحه، نیاز داریم تا در کلاس های عناصر تغییراتی چون اضافه کردن، حذف کردن، toggle کردن انجام دهیم و یا از وجود یک کلاس آگاهی پیدا کنیم.

معمولا همه کتابخانه های جاوااسکریپت، متد هایی برای این کار دارند. مثلا کتابخانه ی پر طرفدار jQuery متد های addClass، removeClass، toggleClass و hasClass را به کار با کلاس ها اختصاص داده است.

در این پست یاد میگیرید که چگونه تغییراتی در کلاس ها با استفاده از classList API انجام دهید. این متد بخشی از جاوااسکریپت پیاده شده روی مرورگرهای مدرن است. مزیت استفاده از API ها این است که بدون نیاز به اضافه کردن کتابخانه هایی چون jQuery، میتوانیم کار هایی که میخواهیم را انجام دهیم.

classList


هر عنصر HTML دارای یک شیء به نام classList است. شیء classList دارای یک لیست از کلاس‌های اجرا شده بر روی عنصر است. این شیء یک آرایه از کلاس های عنصر HTML را بر میگرداند. شما میتوانید با استفاده از خاصیت length هر آرایه، از تعداد اعضای آن آرایه با خبر بشید. پس برای اینکه بدانیم یک عنصر چند کلاس دارد باید به صورت زیر عمل کنیم.

همچنین این شیء دارای متد های زیر میباشد:

  • add(class)
  • remove(class)
  • toggle(class)
  • contains(class)
  • item(index)

هر کدام از این متد ها باید از شیء classList صدا زده شود.

اضافه کردن کلاس


متد add() برای اضافه کردن یک کلاس جدید به عنصر استفاده میشود.

برای جلوگیری از تکرار، تنها زمانی کلاس اضافه میشود که در المنت وجود نداشته باشد.

حذف کردن کلاس


از متد remove() برای حذف کردن یک کلاس از عنصر استفاده میشود.

 Toggle کردن کلاس


وقتی میخواهید یک کلاس در صورت وجود، حذف و در صورت عدم وجود، اضافه شود، از متد toggle() استفاده میشود.

چک کردن وجود یک کلاس در عنصر


میتوانید با استفاده از متد contains(class) چک کنید که کلاس مورد نظر در المنت وجود دارد یا نه.  این متد یک مقدار بولین(true/false) بر میگرداند. به صورت زیر از این متد استفاده میشود.

 پیدا کردن یک کلاس با index آن


از متد item(index) برای بدست آوردن نام یک کلاس توسط index آن استفاده میشود. اگر در index مورد نظر کلاسی وجود نداشته باشد، مقدار null برگردانده میشود.

این متد میتواند زمانی مفید باشد که شما درون حلقه به نام هر یک از کلاس ها نیاز دارید.

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

پشتیبانی مورگرها از classList در caniuse

classList-supporپشتیبانی مرورگر ها از classList API خوب است. دقت داشته باشید که IE از نسخه 10 از این API پشتیبانی میکند. بنابراین اگر پشتیبانی مرورگرهای قدیمی IE برای شما مهم است، میتوانید جایگزینی برای classList قرار دهید.

موفق باشید.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram