متغیرها و جاوااسکریپت (Variables and JavaScript)
اینجا می بینی چطور «متغیرها و جاوااسکریپت» باهم کار می کنند. «متغیر (Variable)» مقدارِ نام گذاری شده است. با جاوااسکریپت می توانیم مقدار متغیرهای CSS را زنده عوض کنیم؛ مثل تغییر رنگ پس زمینه در یک دکمه.
کاربرد متغیرها و جاوااسکریپت: تغییر زنده استایل
متغیرهای CSS به «DOM» دسترسی دارند. یعنی با جاوااسکریپت می شود آن ها را خواند و نوشت. پس بدون گشتن در همه کلاس ها، فقط یک مقدار را تغییر بده و کل ظاهر آپدیت می شود.
<script>\n// گرفتن ریشه سند\nvar r = document.querySelector(':root');\n\n// خواندن مقدار متغیر\nfunction myFunction_get() {\n var rs = getComputedStyle(r);\n alert('The value of --primary-bg-color is: ' + rs.getPropertyValue('--primary-bg-color'));\n}\n\n// تنظیم مقدار متغیر\nfunction myFunction_set() {\n r.style.setProperty('--primary-bg-color', 'green');\n}\n<\/script>\nگام های عملی
- یک متغیر در
:rootبساز. - با
getComputedStyleمقدارش را بخوان. - با
style.setPropertyمقدار جدید بده.
نکته: تغییر متغیر در :root روی همه عناصر اثر می گذارد. برای محدوده کوچک تر، متغیر را روی یک سلکتور خاص تنظیم کن.
جمع بندی سریع
- جاوااسکریپت می تواند متغیرهای CSS را تغییر دهد.
getComputedStyleمقدار فعلی را می خواند.setPropertyمقدار جدید می نویسد.- تغییر در
:rootسراسری است.
برای مرور پایه ها، سر بزن به متغیرها و جاوااسکریپت. همچنین درباره اولویت دهی مقدارها، بخش بازنویسی متغیرها را ببین.