Hướng dẫn set css variable from javascript - đặt biến css từ javascript

Các biến CSS là một bổ sung rất đáng hoan nghênh cho ngôn ngữ, mặc dù chúng rất cơ bản. & NBSP; Chắc chắn chúng ta có thể sử dụng SASS hoặc Stylus nhưng các ngôn ngữ không bao giờ nên tin tưởng vào các nhà phát triển dựa vào các khung và bộ công cụ để thực hiện những gì chúng ta biết chúng ta cần. & NBSP; Và cũng giống như mọi phần khác của trang web, bạn có thể nhận và thao tác các giá trị biến CSS - hãy xem cách!

Cài đặt và sử dụng các biến CSS

Phương pháp truyền thống sử dụng các biến CSS gốc là thêm nó vào root:

:root {
    --my-variable-name: #999999;
}

Đơn giản. & NBSP; Cũng nên nhớ rằng các biến CSS không có sức mạnh như các biến trong SASS, Stylus, v.v.

Nhận giá trị của biến CSS

Để truy xuất giá trị của biến CSS trong cửa sổ, bạn sử dụng ________ 8 & nbsp; và getPropertyValue:

getComputedStyle(document.documentElement)
    .getPropertyValue('--my-variable-name'); // #999999

Giá trị biến được tính toán trở lại dưới dạng chuỗi.

Đặt giá trị của biến CSS

Để đặt giá trị của biến CSS bằng JavaScript, bạn sử dụng ____ 10 & nbsp; trên ____ 11 của ________ 12 & nbsp; thuộc tính:

document.documentElement.style
    .setProperty('--my-variable-name', 'pink');

Bạn sẽ thấy ngay lập tức giá trị mới được áp dụng ở mọi nơi mà biến được sử dụng.

Tôi đã dự đoán sự cần thiết của các hack kinh tởm để thực hiện thao tác biến CSS với JavaScript vì vậy tôi rất vui vì nó dễ như mô tả ở trên!