如何HTML標簽和JS中設置CSS3 var變量
阿新 • • 發佈:2018-12-22
代碼 var () scrip pro 如何 con compute .get
一、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);
如何HTML標簽和JS中設置CSS3 var變量