如何HTML標簽和JS中設置CSS3 var變量

一、HTML標簽中設置CSS變量

如下：

<div style="--color: #cd0000;">
    <img src="mm.jpg" style="border: 10px solid var(--color);">
</div>

二、JS中設置CSS變量

如下，HTML示意：

<div id="box">
    <img src="mm.jpg" style="border: 10px solid var(--color);">
</div>

如果要想讓var(--color)生效，執行下面JavaScript代碼即可：

box.style.setProperty('--color', '#cd0000');

三、JS中獲取CSS變量

JS中獲取CSS變量可以使用getPropertyValue()方法，示意：

// 獲取 --color CSS 變量值
var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); 

// 輸出cssVarColor
// 輸出變量值是：#cd0000 
console.log(cssVarColor);