小tips: 如何HTML標籤和JS中設定CSS3 var變數

摘要： byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8163 本文可全文轉載，個人網站無需授權，只要保留原作者、出處以及文中連結即可，任何網站均可摘要聚合，商用請聯絡授權。 一、HTML標籤中設定CSS變數 如下：...

byzhangxinxu from ofollow,noindex" target="_blank">https://www.zhangxinxu.com/wordpress/?p=8163

本文可全文轉載，個人網站無需授權，只要保留原作者、出處以及文中連結即可，任何網站均可摘要聚合，商用請聯絡授權。

一、HTML標籤中設定CSS變數

如下：

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

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

效果如下截圖：

您可以狠狠地點選這裡： 在HTML標籤style中設定CSS變數demo

二、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');

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

您可以狠狠地點選這裡：JS設定CSS變數demo

三、JS中獲取CSS變數

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

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

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

四、關於CSS3 var()變數

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

更多關於CSS原生變數的特性，可以參考我之前這篇文章：“ 瞭解CSS/CSS3原生變數var ”。

以上就是本文全部內容，感謝閱讀！

本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。

本文地址： https://www.zhangxinxu.com/wordpress/?p=8163

（本篇完）