متغیرهای CSS و جاوا اسکریپت

مثال شماره 1

<script>
// دریافت عنصر ریشه
var r = document.querySelector(':root');

// ایجاد یک تابع برای دریافت مقدار یک متغیر
function myFunction_get() {
  //دریافت استایل ها(ویژگی ها و مقادیر) برای ریشه
  var rs = getComputedStyle(r);
  // --primary-bg-color نشان دادن مقدار متغیر
  alert("The value of --primary-bg-color is: " + rs.getPropertyValue('--primary-bg-color'));
}

//ایجاد یک تابع برای تنظیم مقدار یک متغیر
function myFunction_set() {
  //به یک مقدار دیگر، در این مورد، سبز --primary-bg-color تنظیم مقدار متغیر
  r.style.setProperty('--primary-bg-color', 'green');
}
</script>