這篇“怎么在HTML標(biāo)簽和JS中設(shè)置CSS3 var變量”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么在HTML標(biāo)簽和JS中設(shè)置CSS3 var變量”文章吧。
創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供張家港網(wǎng)站建設(shè)、張家港做網(wǎng)站、張家港網(wǎng)站設(shè)計(jì)、張家港網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、張家港企業(yè)網(wǎng)站模板建站服務(wù)，10年張家港做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
一、HTML標(biāo)簽中設(shè)置CSS變量
如下：
直接正常CSS語句一樣在style屬性中設(shè)置即可。
效果如下截圖：
2018-11-16_221537.png
二、JS中設(shè)置CSS變量
如下，HTML示意：
如果要想讓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í)候還沒多少瀏覽器支持，現(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
