HTML标签和JS中怎么设置CSS3var变量

这篇文章将为大家详细讲解有关HTML标签和JS中怎么设置CSS3 var变量，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

公司主营业务：成都网站制作、成都网站设计、外贸营销网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出长顺免费做网站回馈大家。

一、HTML标签中设置CSS变量

如下：

直接正常CSS语句一样在style属性中设置即可。

效果如下截图：

二、JS中设置CSS变量

如下，HTML示意：

如果要想让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变量就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。