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

- visibility ۰ mode_comment

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

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

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

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

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

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

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

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

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

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

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

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

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

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.