متغیرها و جاوااسکریپت در CSS (Variables and JavaScript)
در این درس می بینید چگونه «متغیرها و جاوااسکریپت» کنار هم عمل می کنند. متغیرهای CSS به DOM دسترسی دارند؛ بنابراین می توانید آن ها را در زمان اجرا بخوانید یا تغییر دهید و بدون تغییر کلاس ها، تم را عوض کنید.
تغییر متغیرها با جاوااسکریپت
جاوااسکریپت می تواند با getComputedStyle
مقدار یک متغیر را بخواند و با style.setProperty
آن را بازنویسی کند. بدین ترتیب، رنگ ها یا فاصله ها را زنده تغییر می دهید و رابط کاربری واکنش گرا می شود.
نمونه CSS پایه برای آزمایش
:root { --primary-bg-color: #1e90ff; --primary-color: #ffffff; } body { background-color: var(--primary-bg-color); } .container { color: var(--primary-bg-color); background-color: var(--primary-color); padding: 15px; } .btn { background: var(--primary-bg-color); color: var(--primary-color); border: 0; padding: 10px 16px; border-radius: 8px; }
نکته: مقداردهی در :root
سراسری است؛ بنابراین جاوااسکریپت با یک بار تغییر، کل تم را به روزرسانی می کند.
الگوی خواندن و نوشتن مقادیر
الگو ساده است: ابتدا عنصر ریشه را انتخاب کنید، سپس مقدار را بخوانید یا با مقدار جدید جایگزین کنید. همچنین می توانید مقدار پشتیبان را داخل var()
تعیین کنید تا در نبود متغیر، رابط پایدار بماند.
مرجع سریع var()
/* fallback زمانی که --brand تعریف نشده است */ .badge { color: var(--brand, #333); }
هشدار: نام متغیرها باید با --
شروع شود و دقیق نوشته شود؛ نام نادرست باعث بی اثر شدن ویژگی می شود.
ادامه یادگیری متغیرها
برای «بازنویسی متغیرها» در سطح محلی، صفحه بازنویسی متغیرها را ببینید. همچنین مقدمه کامل تابع var() در CSS و نسخه مبتنی بر رسانه در متغیرها و Media Queries پیشنهاد می شود.