تغییر متغیرهای CSS با استفاده از JavaScript

تغییر متغیر با استفاده از JavaScript

متغیرهای CSS می‌توانند به DOM دسترسی پیدا کنند، این بدان معناست که شما می‌توانید آن‌ها را با استفاده از JavaScript تغییر دهید.

این مثال نشان می‌دهد که چگونه می‌توانید اسکریپتی ایجاد کنید که مقدار متغیر --blue مورد استفاده در مثال‌های صفحه قبل را نمایش دهد و تغییر دهد. در اینجا، اگر با JavaScript آشنا نیستید، نگران نباشید. شما می‌توانید اطلاعات بیشتری در مورد JavaScript در آموزش‌های JavaScript ما بیاموزید:

مثال

<script>
// عنصر ریشه را دریافت کنید
var r = document.querySelector(':root');
// تابعی برای دریافت مقادیر متغیرها ایجاد کنید
function myFunction_get() {
  // استایل‌ها (ویژگی‌ها و مقادیر) برای ریشه را دریافت کنید
  var rs = getComputedStyle(r);
  // هشدار مقدار متغیر --blue
  alert("مقدار --blue: " + rs.getPropertyValue('--blue'));
}
// ایجاد فункциون برای تنظیم مقدار متغیر
function myFunction_set() {
  // مقدار متغیر --blue را به مقدار دیگری تنظیم کنید (در این مورد "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

آزمایش کنید

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که از این ویژگی کامل پشتیبانی می‌کند.

فункциون
var() 49.0 15.0 31.0 9.1 36.0

فункциون var() CSS

فункциون توضیح
var() مقدار متغیر CSS را وارد کنید.