CSS Change Variables With JavaScript
متغیرهای CSS (همون Custom Properties یا Variables) رو میتونیم خیلی راحت با جاوااسکریپت تغییر بدیم.
این کار بیشتر برای تعویض تم (Dark/Light) یا تغییر داینامیک رنگها و سایزها استفاده میشه.
🔹 ساختار کلی
برای تغییر متغیر باید از متد زیر استفاده کنیم:
🔹 مثال ۱: تغییر رنگ پسزمینه با JS
👉 با کلیک روی دکمه، رنگها تغییر میکنن.
🔹 مثال ۲: تغییر سایز فونت
👉 هر بار روی دکمه کلیک بشه، سایز فونت تغییر میکنه.
🔹 مثال ۳: خواندن مقدار متغیر
✅ خلاصه:
-
با
setProperty
متغیرها رو تغییر میدیم. -
با
getPropertyValue
مقدار فعلی رو میگیریم. -
این تکنیک برای تمبندی، انیمیشنهای داینامیک، و شخصیسازی UI فوقالعاده است.