CSS کے ذریعے متغیرات کو تبدیل کرنا

تغییر متغیر با استفاده از 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'));
}
// Create a function to set the value of the variable
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

خود کارا تجربہ کریں

بروسر سپورٹ

جداول میں نمبر، پہلی بروزر کو مطلق طور پر اس کا اثتر سپورٹ کرنے کا اشارہ دیتا ہے۔

فنکشن
var() 49.0 15.0 31.0 9.1 36.0

CSS var() فنکشن

فنکشن وصف
var() CSS متغیر کا نمبر داخل کریں