CSS JavaScript ile Değişkenleri Değiştirme

Değişkenleri JavaScript ile değiştir

CSS değişkenleri DOM'a erişebilir, bu da JavaScript ile değiştirebilirsiniz.

Bu örnek, önceki sayfada kullanılan örnekteki --blue değişkenini nasıl gösterip değiştireceğinizi açıklamaktadır. Eğer JavaScript ile ilgili bilgi sahibi değilseniz, endişelenmeyin. JavaScript hakkında daha fazla bilgi öğrenebilirsiniz: bizim JavaScript eğitimimizde:

Örnek

<script>
// Kök elementi al
var r = document.querySelector(':root');
// Değişken değerlerini almak için fonksiyon oluştur
function myFunction_get() {
  // Kök için stilleri (özellikler ve değerler) al
  var rs = getComputedStyle(r);
  // --blue değişkeninin değerini uyar
  alert("--blue değerinin değeri: " + rs.getPropertyValue('--blue'));
}
// Değişken değerini ayarlamak için bir fonksiyon oluşturma
function myFunction_set() {
  // --blue değişkeninin değerini başka bir değere (bu durumda "lightblue") ayarlayın
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Kişisel Deneyim

Tarayıcı Desteği

Tablodaki rakamlar, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü belirtmektedir.

Fonksiyon
var() 49.0 15.0 31.0 9.1 36.0

CSS var() Fonksiyonu

Fonksiyon Açıklama
var() CSS Değişkenlerinin Değerlerini Ekle.