تخفیف ویژه

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

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

تغییر دادن کلاس المنت‌ها با استفاده از 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 چاپ خواهد شد.

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

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

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

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

کامران

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

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