如何HTML標籤和JS設定CSS3 var變量

這篇文章帶給大家的內容是關於如何HTML標籤和JS中設定CSS3 var變量，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一、HTML標籤中設定CSS變數

如下：

<div style="--color: #cd0000;">
<img  src="mm.jpg"   style="max-width:90%" alt="如何HTML標籤和JS設定CSS3 var變量" >
</div>

直接正常CSS語句一樣在style屬性中設定即可。

效果如下截圖：

二、JS中設定CSS變數

#如下，HTML示意：

##< ;div id="box">

如果要讓var（--color）生效，執行下面JavaScript程式碼即可：

box.style.setProperty（'--color', '#cd0000' ）;

也就是使用setProperty（）方法，效果如下GIF截圖示意：

三、JS中取得CSS變數

JS中取得CSS變數可以使用getPropertyValue（）方法，示意：

// 获取 --color CSS 变量值
var cssVarColor = getComputedStyle（box）。getPropertyValue（'--color'）；
// 输出cssVarColor
// 输出变量值是：#cd0000
console.log（cssVarColor）；

四、關於CSS3 var（）變數

CSS3 var（）變數是個好東西，2年前介紹的時候還沒有多少瀏覽器支持，現在，Edge16也已經完全支援了。

以上就是如何HTML標籤和JS中設定CSS3 var變數的全部介紹，如果您想了解更多有關

CSS3教學，請關注PHP中文網。

以上是如何HTML標籤和JS設定CSS3 var變量的詳細內容。更多資訊請關注PHP中文網其他相關文章！