تغییر دادن کلاس المنت ها با استفاده از Javascript

در این مطلب میخوایم یاد بگیریم که چطور با استفاده از Javascript میتونیم کلاسهای یک المنت در HTML رو مدیریت کنیم و کلاس رو اضافه یا حذف کنیم و از بودن کلاس خاصی با خبر بشیم.

روش مدرن استفاده از classList برای تغییر دادن کلاس

با استفاده از classList که در HTML5 اضافه شد میتونین به راحتی در کلاس المنتها بدون نیاز به ابزار خاصی دستکاری کنید و به اطلاعات مورد نظرتون دسترسی پیدا کنید. کدهای زیر رو ببینید:

const MyElement = document.getElementById('MyElement');

// Add class
MyElement.classList.add('MyClass');

// Remove class
MyElement.classList.remove('MyClass');

// Check class exist
if (MyElement.classList.contains('MyClass')) {
  console.log('MyElement has MyClass');
}

// Toggle class
MyElement.classList.toggle('MyClass');

همونطور که میبینید میتونیم با استفاده از متد add، delete، contains و toggle که classList در اختیارمون میذاره، در کلاس‌ها دستکاری کنیم. مرورگرهای قدیمی از classList پشتیبانی نمیکنن و شما میتونین از ابزارهای مختلف مثل classList.js استفاده کنید و از این ویژگی در مرورگرهای قدیمی هم استفاده کنید.

شما میتونین با استفاده از Javascript و بدون classList نیز این کارها رو انجام بدین. برای تغییر دادن کلاس و جایگزین کردن همه کلاسهای یک المنت میتونین بصورت زیر عمل کنید:

const MyElement = document.getElementById('MyElement');

MyElement.className = 'newClass';

اگر بخواید چند کلاس رو همزمان اضافه کنید باید نام کلاسها رو با space از هم جدا کنید. برای اضافه کردن یک کلاس جدید میتونین بصورت زیر عمل کنید:

const MyElement = document.getElementById('MyElement');

MyElement.className += ' otherClass';

میبینید که از عملگر += استفاده کردیم و کلاس دیگری رو به المنت اضافه کردیم. برای حذف کردن یک کلاس میتونیم از Regular expression استفاده کنیم. بصورت زیر:

const MyElement = document.getElementById('MyElement');

MyElement.className = MyElement.className.replace(/(?:^|\s)targetClass(?!\S)/g, '');

مثلا در کد بالا کلاس targetClass در صورت وجود حذف خواهد شد.

برای بررسی کردن اینکه آیا المنت، کلاس خاصی رو داره یا خیر میتونیم بصورت زیر عمل کنیم:

const MyElement = document.getElementById('MyElement');

if (MyElement.className.match(/(?:^|\s)targetClass(?!\S)/)) {
  console.log('MyElement has targetClass');
}

همونطور که مشاهده میکنید در اینجا هم از عبارات منظم استفاده کردیم و چک کردیم که کلاس targetClass وجود داره یا خیر و در صورت وجود داشتن، عبارت مورد نظر در Console چاپ خواهد شد.

به همین راحتی.

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

نویسنده

محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.