怎么在HTML標(biāo)簽和JS中設(shè)置CSS3 var變量

這篇“怎么在HTML標(biāo)簽和JS中設(shè)置CSS3 var變量”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“怎么在HTML標(biāo)簽和JS中設(shè)置CSS3 var變量”文章吧。

　　一、HTML標(biāo)簽中設(shè)置CSS變量

　　如下：

　　<divstyle="--color:#cd0000;">

　　<imgsrc="mm.jpg"style="border:10pxsolidvar（--color）；">

　　</div>

　　直接正常CSS語(yǔ)句一樣在style屬性中設(shè)置即可。

　　效果如下截圖：

　　2018-11-16_221537.png

　　二、JS中設(shè)置CSS變量

　　如下，HTML示意：

　　<divid="box">

　　<imgsrc="mm.jpg"style="border:10pxsolidvar（--color）；">

　　</div>

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

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

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

　　js-set-var.gif

　　三、JS中獲取CSS變量

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

　　//獲取--colorCSS變量值

　　varcssVarColor=getComputedStyle（box）。getPropertyValue（'--color'）；

　　//輸出cssVarColor

　　//輸出變量值是：#cd0000

　　console.log（cssVarColor）；

　　四、關(guān)于CSS3var（）變量

　　CSS3var（）變量是個(gè)好東西，2年前介紹的時(shí)候還沒(méi)多少瀏覽器支持，現(xiàn)在，Edge16也已經(jīng)完全支持了。

以上就是關(guān)于“怎么在HTML標(biāo)簽和JS中設(shè)置CSS3 var變量”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。