Menggunakan JavaScript untuk Mengubah Variabel CSS

Mengubah variabel menggunakan JavaScript

Variabel CSS dapat diakses DOM, yang berarti Anda dapat mengubahnya menggunakan JavaScript.

Contoh ini menjelaskan bagaimana membuat skrip untuk menampilkan dan mengubah variabel --blue yang digunakan di contoh di halaman sebelumnya. Jika Anda tidak mengenal JavaScript, jangan khawatir. Anda dapat belajar lebih banyak tentang JavaScript di tutorial JavaScript kami:

Contoh

<script>
// Dapatkan elemen akar
var r = document.querySelector(':root');
// Buat fungsi untuk mendapatkan nilai variabel
function myFunction_get() {
  // Dapatkan gaya (properti dan nilai) untuk akar
  var rs = getComputedStyle(r);
  // Alert nilai variabel --blue
  alert("Nilai --blue adalah: " + rs.getPropertyValue('--blue'));
}
// Buat fungsi untuk mengatur nilai variabel
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Coba Sendiri

Dukungan Peramban

Angka dalam tabel menunjukkan versi peramban pertama yang mendukung properti ini sepenuhnya.

Fungsi
var() 49.0 15.0 31.0 9.1 36.0

Fungsi var() CSS

Fungsi Deskripsi
var() Masukkan nilai variabel CSS.