کار با Classes و Styles از طریق جاوااسکریپت

مدیریت Classها و استایل‌ها از طریق جاوااسکریپت

مقدمه

در درس قبل دیدیم چگونه محتوا و Attribute های عمومی یک عنصر را تغییر دهیم. یکی از رایج‌ترین نیازهای عملی در کار با DOM، تغییر ظاهر یک عنصر است؛ معمولاً از طریق افزودن یا حذف کلاس‌های CSS، و گاهی با تنظیم مستقیم استایل. در این درس، ابزارهای استاندارد برای هر دو روش را بررسی می‌کنیم.

چرا معمولاً کلاس بهتر از استایل مستقیم است؟

اگرچه می‌توان مستقیماً استایل یک عنصر را از طریق جاوااسکریپت تغییر داد، اما روش رایج‌تر و توصیه‌شده این است که منطق ظاهری در فایل CSS نگه داشته شود و جاوااسکریپت فقط وظیفه‌ی افزودن یا حذف کلاس را بر عهده بگیرد؛ این جداسازی، مطابق با اصل تفکیک مسئولیت بین ساختار (HTML)، ظاهر (CSS) و رفتار (جاوااسکریپت) است که در همان درس اول این دوره به آن اشاره کردیم.

classList — ابزار اصلی کار با کلاس‌ها

هر عنصر DOM، یک Property به نام classList دارد که مجموعه‌ای از متدهای کاربردی برای مدیریت کلاس‌های آن عنصر فراهم می‌کند:

let box = document.getElementById("box");

box.classList.add("active");
console.log(box.className);

box.classList.remove("active");
console.log(box.className);

box.classList.add("highlight", "large");
console.log(box.className);

تحلیل کد

classList.add یک یا چند کلاس را به عنصر اضافه می‌کند، بدون این‌که کلاس‌های موجود دیگر را پاک کند. classList.remove دقیقاً برعکس عمل می‌کند: فقط کلاس مشخص‌شده را حذف می‌کند و بقیه‌ی کلاس‌ها دست‌نخورده باقی می‌مانند. className، که در این مثال برای مشاهده‌ی نتیجه استفاده شده، رشته‌ای شامل تمام کلاس‌های فعلی عنصر است.

toggle — سوییچ کردن یک کلاس

یکی از پرکاربردترین متدهای classList، متد toggle است؛ اگر کلاس موردنظر وجود داشته باشد آن را حذف می‌کند، و اگر وجود نداشته باشد، آن را اضافه می‌کند:

let menu = document.getElementById("menu");

console.log(menu.classList.contains("open"));

menu.classList.toggle("open");
console.log(menu.classList.contains("open"));

menu.classList.toggle("open");
console.log(menu.classList.contains("open"));

تحلیل رفتار جاوااسکریپت

در این مثال، فراخوانی اول toggle("open") چون کلاس open وجود نداشت، آن را اضافه می‌کند و true برمی‌گرداند. فراخوانی دوم، چون این‌بار کلاس وجود دارد، آن را حذف می‌کند و false برمی‌گرداند. این الگو، به‌خصوص برای سناریوهایی مثل باز و بسته کردن یک منو با یک کلیک واحد، بسیار رایج است؛ به‌جای نوشتن یک شرط دستی برای بررسی وجود کلاس و سپس افزودن یا حذف آن، toggle این منطق را در یک خط خلاصه می‌کند.

متد contains، همان‌طور که در این مثال دیدیم، برای بررسی این‌که آیا عنصر یک کلاس مشخص را دارد یا نه، مقدار Boolean برمی‌گرداند.

toggle با آرگومان دوم اجباری

متد toggle یک آرگومان دوم اختیاری هم می‌پذیرد که رفتار آن را از حالت «سوییچ خودکار» به «همیشه اضافه کن یا همیشه حذف کن» تغییر می‌دهد:

menu.classList.toggle("open", true);  // همیشه اضافه می‌کند، صرف‌نظر از وضعیت فعلی
menu.classList.toggle("open", false); // همیشه حذف می‌کند، صرف‌نظر از وضعیت فعلی

این حالت برای مواقعی مفید است که وضعیت نهایی کلاس باید بر اساس یک شرط دیگر (نه صرفاً وضعیت فعلی خودش) تعیین شود.

تنظیم مستقیم استایل با Property به نام style

گاهی، به‌خصوص برای مقادیری که به‌صورت پویا محاسبه می‌شوند (مثل موقعیت دقیق یک عنصر که از طریق محاسبات جاوااسکریپت به دست آمده)، تنظیم مستقیم استایل ضروری است. برای این کار، از Property ویژه‌ی style استفاده می‌کنیم:

let box = document.getElementById("box");

box.style.backgroundColor = "steelblue";
box.style.width = "200px";
box.style.display = "flex";

console.log(box.style.backgroundColor);

تحلیل کد

نکته‌ی مهم نحوی اینجاست: نام Property های CSS که در خودِ CSS با خط تیره نوشته می‌شوند (مثل background-color)، در جاوااسکریپت باید به‌صورت camelCase نوشته شوند (backgroundColor)؛ چون خط تیره در جاوااسکریپت، عملگر تفریق محسوب می‌شود و نمی‌تواند بخشی از نام یک Property باشد. همچنین، مقادیر عددی مثل عرض یا ارتفاع، باید همراه با واحد (مثل "200px"، نه فقط 200) به‌صورت رشته نوشته شوند.

چرا style مستقیم را باید محدود استفاده کرد؟

استفاده‌ی گسترده از style مستقیم، باعث می‌شود منطق ظاهری صفحه بین فایل CSS و کد جاوااسکریپت پخش شود؛ این کار نگه‌داری پروژه را در بلندمدت دشوارتر می‌کند. رویکرد رایج‌تر و قابل‌نگهداری‌تر این است که تمام حالت‌های ظاهری ممکن (مثل .active، .disabled، .highlighted) از قبل در فایل CSS تعریف شوند، و جاوااسکریپت فقط با افزودن یا حذف همین کلاس‌ها (از طریق classList)، بین این حالت‌ها سوییچ کند؛ style مستقیم عمدتاً برای مقادیر کاملاً پویا و محاسباتی (مثل موقعیت یک عنصر قابل کشیدن) رزرو می‌شود.

جدول جمع‌بندی

متد/Property	کاربرد
classList.add(...)	افزودن یک یا چند کلاس
classList.remove(...)	حذف یک یا چند کلاس
classList.toggle(name)	سوییچ کردن وجود یک کلاس
classList.contains(name)	بررسی وجود یک کلاس (خروجی Boolean)
style.propertyName	تنظیم مستقیم یک Property خاص CSS

جمع‌بندی

classList ابزار اصلی و توصیه‌شده برای مدیریت ظاهر عناصر از طریق جاوااسکریپت است؛ با متدهای add، remove، toggle و contains، می‌توان کلاس‌های CSS را به‌طور کامل کنترل کرد. Property ویژه‌ی style امکان تنظیم مستقیم استایل را فراهم می‌کند، اما به دلیل مسائل نگهداری کد، معمولاً باید فقط برای مقادیر واقعاً پویا و محاسباتی استفاده شود، نه برای مدیریت حالت‌های کلی ظاهری.