تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۳۰ شهریور ۱۳۹۳

به نام خدا

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

html5js_ft

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

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

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

classList

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

<div class="first second third" id="element">this is a element</div>

<script>
var element = document.querySelector('#element');
element.classList; // returns ["first", "second", "third"]
element.classList.length // returns 3
</script>

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

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

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

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

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

myElement.classList.add('myClass');

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

حذف کردن کلاس

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

myElement.classList.remove('myClass');

 Toggle کردن کلاس

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

myEleeent.classList.toggle('myClass');

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

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

if (myEle.classList.contains('myClass')) {
    // Class exists!
} else {
    // Class not found.
}

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

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

var index = myEle.classList.item(0);

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

for (var i = 0; i < myEle.classList.length; i++) {
    var class = myEle.classList.item(i);
    // some code 
}

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

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

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

موفق باشید.

چه امتیازی به این مقاله می دید؟
نویسنده علی امینی
یک وب دیزاینر هستم که میشه گفت بر زبان های HTML, CSS, JavaScript مسلطم و همیشه با کتابخانه jQuery کار میکنم. از میان زبان های سمت سرور PHP رو میپسندم و CMS مورد علاقه من WordPress هست. هیچ IDE نمیتونه جای SublimeText رو برام بگیره و همیشه خودمو به روز نگه میدارم و به کدنویسی عشق می ورزم.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :