Gunakan JavaScript untuk Mengubah Variabel CSS

Ubah variable menggunakan JavaScript

Variable CSS boleh diakses DOM, ini bermakna anda boleh mengubahnya melalui JavaScript.

Contoh ini memaparkan bagaimana untuk membuat skrip untuk menunjukkan dan mengubah variable --blue yang digunakan di contoh di halaman sebelumnya. Sekarang, jika anda belum mengenal JavaScript, jangan khawatir. Anda boleh belajar lebih banyak tentang JavaScript di kursus JavaScript kami:

Contoh

<script>
// Get the root element
var r = document.querySelector(':root');
// Create a function to get the value of the variable
function myFunction_get() {
  // Get the styles (properties and values) for the root
  var rs = getComputedStyle(r);
  // Alert the value of the --blue variable
  alert("Nilai --blue adalah: " + rs.getPropertyValue('--blue'));
}
// Buat fungsi untuk menset nilai variabel
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Cuba Sendiri

Dukungan Pemungut

Angka dalam tabel menunjukkan versi pereka paling awal yang menyokong sifat ini sepenuhnya.

Fungsi
var() 49.0 15.0 31.0 9.1 36.0

Fungsi var() CSS

Fungsi Penerangan
var() Sisipkan nilai variabel CSS.