Lấy và thiết lập biến CSS (CSS Variables) với JavaScript

Phương thức getComputedStyle() trả về đối tượng chứa tất cả style áp dụng cho phần tử. getPropertyValue() lấy giá trị thuộc tính mong muốn. setProperty() thay đổi giá trị biến CSS.

Ví dụ

Các ví dụ minh họa lấy/thiết lập biến CSS bằng JavaScript.

<!DOCTYPE html> <html> <head> <style> :root {    --outerColor: magenta;    --innerColor: lightgreen;    text-align: center; } div {    margin: 5%;    padding: 10%;    background-color: var(--innerColor);    border: 2px groove var(--outerColor); } </style> </head> <body> <div onmouseover="showColor()" onmouseout="changeColor()"> <p></p> </div> </body> <script> let ele = document.querySelector(':root'); let para = document.querySelector('p'); function showColor() {    let cs = getComputedStyle(ele);    para.textContent = ("Previously " + cs.getPropertyValue('--innerColor') + " color"); } function changeColor() {    let item = document.querySelector('div');    item.style.setProperty('--innerColor', 'magenta') } </script> </html>

Kết quả

Kết quả như hình (thay đổi màu nền khi hover).

Ví dụ 2

<!DOCTYPE html> <html> <head> <style> :root {    --customColor: seagreen; } div {    margin: 5%;    width: 130px;    height: 130px;    box-shadow: inset 0 0 38px var(--customColor);    border-radius: 50%; } </style> </head> <body> <div onmouseover="toggle()"></div> </body> <script> let ele = document.querySelector(':root'); function toggle() {    let cs = getComputedStyle(ele);    let item = document.querySelector('div');    if(cs.getPropertyValue('--customColor') !== 'blue') {       item.style.setProperty('--customColor', 'blue')    } } </script> </html>

Kết quả

Kết quả như hình (thay đổi box-shadow color khi hover).