در این مطلب میخوایم یاد بگیریم که چطور با استفاده از 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 چاپ خواهد شد.
به همین راحتی.
اگر شما هم روشی برای انجام اینکار به ذهنتون میرسه خوشحال میشیم که در بخش نظرات با ما در میان بذارید.
سلام ببخشید ی سوال داشتم ، میخواستم ببینم اگر با تغییر اندازه صفحه بخوام کلاسی حذف یا اضافه بشه چجوری هستش ، ممنون میشم جواب بدید.