CSS Sử Dụng JavaScript Để Thay Đổi Biến

Thay đổi biến bằng JavaScript

Các biến CSS có thể truy cập DOM, điều này có nghĩa là bạn có thể thay đổi chúng bằng JavaScript.

Ví dụ này minh họa cách tạo script để hiển thị và thay đổi biến --blue được sử dụng trong ví dụ ở trang trước. Nếu bạn không quen thuộc với JavaScript, đừng lo lắng. Bạn có thể học thêm về JavaScript trong hướng dẫn JavaScript của chúng tôi:

Mô hình

<script>
// Lấy phần tử gốc
var r = document.querySelector(':root');
// Tạo hàm lấy giá trị biến
function myFunction_get() {
  // Lấy các phong cách (thuộc tính và giá trị) cho gốc
  var rs = getComputedStyle(r);
  // Cảnh báo giá trị của biến --blue
  alert("Giá trị của --blue là: " + rs.getPropertyValue('--blue'));
}
// Tạo hàm đặt giá trị của biến
function myFunction_set() {
  // Đặt giá trị của biến --blue thành giá trị khác (trong trường hợp này là "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Thử Nghiệm Thực Tế

Hỗ Trợ Trình Duyệt

Số Trong Bảng Chỉ Ra Phiên Bản Trình Duyệt Đầu Tiên Hỗ Trợ Đầy Đủ Thuộc Tính Này.

Hàm
var() 49.0 15.0 31.0 9.1 36.0

Hàm CSS var()

Hàm Mô Tả
var() Chèn Giá Trị Biến CSS.