CSS Thay đổi các biến bằng JavaScript
Thay đổi các biến bằng JavaScript
Các biến CSS có quyền truy cập vào DOM, có nghĩa là bạn có thể thay đổi chúng bằng JavaScript.
Đây là một ví dụ về cách bạn có thể tạo một tập lệnh để hiển thị và thay đổi biến --blue từ ví dụ được sử dụng trong các trang trước. Hiện tại, đừng lo lắng nếu bạn không quen với JavaScript. Bạn có thể tìm hiểu thêm về JavaScript trong Hướng dẫn JavaScript của chúng tôi :
Thí dụ
<script>
// Get the root element
var r = document.querySelector(':root');
// Create a function for getting a variable value
function
myFunction_get() {
// Get the styles (properties and values) for the
root
var rs = getComputedStyle(r);
// Alert the value of
the --blue variable
alert("The value of --blue is: " +
rs.getPropertyValue('--blue'));
}
// Create a function for setting a
variable value
function myFunction_set() {
// Set the value of
variable --blue to another value (in this case "lightblue")
r.style.setProperty('--blue', 'lightblue');
}
</script>
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ
var()chức năng.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Hàm CSS var ()
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |