17
تشکر

تغییر در کلاس‌ها با استفاده از جاوا اسکریپت

جاوا اسکریپت - JavaScript

جاوا اسکریپت – JavaScript

در بیشتر پروژه ها، front-end developerها احتیاج دارند که تغییری در کلاس‌های یک عنصر با استفاده از جاوا اسکریپت ایجاد کنند، که بیشتر هم اینکار را با استفاده از کتابخانه jQuery انجام میدهند، که البته وجود متد toggleClass این نیاز را بیشتر کرده است.

خود جاوا اسکریپت در ابتدا لیست کلاس‌ها را به صورت یک رشته میداد که برای اضافه یا حذف کردن کلاس از درون آن باید، با توابعی مانند indexOf یا توابعی دیگر که مربوط به رشته هستند با کلاس کار کرد. اما حالا دیگر نیازی به کتابخانه jQuery نداریم، زیرا جاوا اسکریپت دست به کار شده و شیئی به نام classList را ایجاد کرده است، که انتظارات همه را برآورده میکند.

در ادامه مطلب همراه ما باشید

شیء classList

هر عنصر HTML شیئی به نام classList دارد که لیستی از کلاس‌های همان عنصر را در اختیار ما قرار میگذارد. برای مثال ما یک div داریم. خروجی classList این عنصر مشابه زیر است:

var wr = document.getElementById('wr');
console.log(wr.classList);

//Return
{
  0: "box"
  1: "red"
  length: 2
}

شیء classList دارای 5 متد به شرح است.

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

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

برای اضافه کردن کلاس از متد add استفاده میکنیم. میتوانید چندین کلاس را با هم اضافه کنید.

element.classList.add('inner');
element.classList.add.('inner', 'blue');

حذف کردن کلاس‌

برای حذف کردن کلاس از متد remove استفاده میکنیم. مشابه متد add در اینجا هم میتوان چندین کلاس را با هم حذف کرد.

element.classList.remove('box', 'red');

متدtoggle

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

element.classList.toggle('box');

چک کردن کلاس‌ها

متد contains مشابه متد hasClass در جی کوئری عمل میکند. اگر کلاس مربوطه در عنصر باشد مقدار true و در غیر اینصورت مقدار false را برمیگرداند. برای مثال میتوانیم با استفاده از if با این متد کار کنیم.

if(element.classList.contains('red')) {
    //Class exists
} else {
    //Class not found
}

متد item

توسط این متد میتوان یک کلاس را بر اساس شماره index آن بدست آورد. اگر آن شماره index وجود نداشته باشد، مقدار null برمیگرداند.

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

نتیجه‌گیری

جاوا اسکریپت، یکی از نیازهای مهم را با استفاده از شیء classList برآورده کرده است. که دیگر ما نیازی به کتابخانه‌ها در این زمینه نداریم.

برای مشاهده پشتیبانی مرورگرها به سایت caniuse بروید.

  • asghar می‌گه:

    این چه طوره
    document.getElementById(“id”).className=’class';

    • محسن شفیعی می‌گه:

      به این صورت هم میشه. اما در className شما به صورت یک رشته با کلاس رفتار میکنید و دیگه مثلا نمیتونید مستقیما یک کلاس رو حذف کنید. مگه اینکه خودتون با توابع رشته ای اینکارو انجام بدید.

  • رضا طاهری می‌گه:

    عالی بود
    ممنون


  • نظرات این مطلب بسته است.