CSS Change Variables With JavaScript

متغیرهای CSS (همون Custom Properties یا Variables) رو می‌تونیم خیلی راحت با جاوااسکریپت تغییر بدیم.
این کار بیشتر برای تعویض تم (Dark/Light) یا تغییر داینامیک رنگ‌ها و سایزها استفاده میشه.

🔹 ساختار کلی

برای تغییر متغیر باید از متد زیر استفاده کنیم:

element.style.setProperty("--variable-name", "newValue");

🔹 مثال ۱: تغییر رنگ پس‌زمینه با JS

<body> <button onclick="changeTheme()">Change Theme</button> <div class="box">Hello CSS Variables</div> </body>
:root { --bg-color: white; --text-color: black; } body { background-color: var(--bg-color); color: var(--text-color); } .box { padding: 20px; border: 2px solid var(--text-color); }
function changeTheme() { document.documentElement.style.setProperty("--bg-color", "black"); document.documentElement.style.setProperty("--text-color", "white"); }

👉 با کلیک روی دکمه، رنگ‌ها تغییر می‌کنن.

🔹 مثال ۲: تغییر سایز فونت

<p class="text">این متن تغییر سایز می‌دهد!</p> <button onclick="increaseSize()">بزرگ‌تر</button>
:root { --font-size: 16px; } .text { font-size: var(--font-size); }
function increaseSize() { document.documentElement.style.setProperty("--font-size", "24px"); }

👉 هر بار روی دکمه کلیک بشه، سایز فونت تغییر می‌کنه.

🔹 مثال ۳: خواندن مقدار متغیر

let bgColor = getComputedStyle(document.documentElement).getPropertyValue("--bg-color"); console.log(bgColor); // مقدار فعلی متغیر رو نشون میده

✅ خلاصه:

  • با setProperty متغیرها رو تغییر می‌دیم.

  • با getPropertyValue مقدار فعلی رو می‌گیریم.

  • این تکنیک برای تم‌بندی، انیمیشن‌های داینامیک، و شخصی‌سازی UI فوق‌العاده است.