javascriptclassList and inline stylesکلاس و ظاهر عنصر در جاوااسکریپت
ظاهر عنصر در جاوااسکریپت را با classList و style کنترل کنید؛ افزودن کلاس، toggle با شرط صریح و تفاوت سبک درون‌خطی با ظاهر محاسبه‌شده.
مفهوم به زبان ساده
برای نمایش وضعیت‌هایی مانند «انتخاب‌شده» یا «در حال ذخیره»، معمولاً بهتر است رفتار را در جاوااسکریپت و قواعد ظاهری را در CSS نگه داریم. classList ابزار افزودن، حذف و بررسی کلاس‌های یک عنصر است. این روش اجازه می‌دهد یک کلاس را تغییر دهیم و کلاس‌های دیگر همان عنصر را حفظ کنیم؛ جایگزینی کامل className ممکن است بخشی از ظاهر قبلی را ناخواسته کنار بگذارد.
toggle بدون آرگومان دوم، کلاس را برعکس می‌کند. وقتی وضعیت مدل را می‌دانیم، toggle(name, condition) گویاتر است: شرط true کلاس را حاضر و شرط false آن را حذف می‌کند. در مثال، دکمه یک کلاس پایه دارد و کلاس selected دقیقاً مطابق مقدار isSelected تنظیم می‌شود. اجرای دوباره با همان شرط، وضعیت را بی‌دلیل برعکس نمی‌کند.
style فقط سبک‌های درون‌خطی عنصر را می‌خواند یا تغییر می‌دهد؛ تمام ظاهر حاصل از فایل CSS را نشان نمی‌دهد. برای مقدار محاسبه‌شده، getComputedStyle ابزار جداگانه‌ای است. تغییر رنگ به‌تنهایی پیام کافی برای همهٔ کاربران نیست؛ وضعیت مهم را با متن و ویژگی دسترس‌پذیری مناسب هم بیان کنید. برای تمرین، فعال و غیرفعال‌شدن یک کلاس را از یک مقدار بولی کنترل کنید و کلاس پایه را ثابت نگه دارید.
کجا به کار می‌آید؟
- نمایش وضعیت انتخاب، خطا یا بارگذاری با کلاس مشخص
- تغییر یک ویژگی محدود و پویا بدون بازنویسی همهٔ کلاس‌ها
از تعریف تا یک مثال واقعی
const button = document.createElement('button');
button.classList.add('button');
const isSelected = true;
button.classList.toggle('selected', isSelected);
console.log(button.classList.contains('selected'));
button.classList.toggle('selected', false);
console.log(button.className);
button.style.marginTop = '8px';
console.log(button.style.marginTop);
true button 8px
این مثال چطور کار می‌کند؟
کلاس button به‌عنوان کلاس پایه ساخته می‌شود.
toggle با شرط true، selected را اضافه می‌کند.
حذف selected کلاس پایه را حفظ می‌کند؛ style مقدار درون‌خطی را می‌خواند.
اشتباه رایج
toggle بدون شرط، در هر فراخوانی وضعیت را برعکس می‌کند. وقتی وضعیت نهایی را می‌دانید، شرط را بدهید. خواندن element.style نیز جای خواندن تمام ظاهر محاسبه‌شده نیست.
این را به خاطر بسپارید
وضعیت را با داده تعیین کنید و کلاس مرتبط را صریحاً حاضر یا حذف کنید؛ ظاهر اصلی را در CSS نگه دارید.