کلس - Class ها در زبان HTML یک شناسه هستند برای استایل دهی و حتی کدنویسی جاوا اسکریپت. گاهی اوقات نیاز می شود بطور برنامه نویسی شده یک کلس را تغییر دهیم. برای مثال یک اسکریپت آماده داریم اما کلسی که بطور خودکار تولید می شود و یا تگی که بطور خودکار در مکانی از سایت ایجاد می شود را نمی توانیم در سورس سایت پیدا کنیم. در این صورت می توانیم یک کلس جدید به آن اضافه کنیم تا بتوانیم اقدامات دلخواهمان را بر اساس کلس خودمان انجام دهیم. یا اینکه یک کلس به اشتباه و بطور خودکار داخل یک تگ اضافه می شود که قصد داریم آن را حذف کنیم. یا در حالت دیگر یک کلس مشخص را قصد داریم با کلسی دیگر جایگزین کنیم. در این تاپیک از بیتاک با ما همراه باشید!
کدهای جاوا اسکریپت مدرن بر اساس HTML5
ما در HTML5 قادریم با این کدهای زیر، اقدامات لازم را در خصوص مدیریت یک کلس انجام دهیم:
document.getElementById("MyElement").classList.add('MyClass'); /* افزودن کلس جدید */
document.getElementById("MyElement").classList.remove('MyClass'); /* حذف کلس دلخواه */
if ( document.getElementById("MyElement").classList.contains('MyClass') ) /* دستور شرطی بررسی موجود بودن کلس */
document.getElementById("MyElement").classList.toggle('MyClass');
- در کد بالا بجای
MyElement باید آی دی / ID تگ موردنظرتان که قصد دارید عملیات کلس روی آن اعمال شود را جایگزین کنید.
- بجای
MyClass باید نام کلس دلخواهتان را وارد کنید.
دستورات قدیمی جاوا اسکریپت برای انجام اینکار
این دستورات تقریبا روی اکثر مرورگرها کار می کنند. توجه داشته باشید که آی دی و کلس که بالاتر توضیح داده شد در کدهای زیر هم به همان صورت است.
جایگزین کردن تمامی کلس های با کلس دلخواه
document.getElementById("MyElement").className = "MyClass";
اضافه کردن یک کلس جدید به کلس های فعلی تگ
document.getElementById("MyElement").className += " MyClass";
حذف یک کلس دلخواه از بین کلس های یک تگ
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace( /(?:^|\s)MyClass(?!\S)/g , '' )
