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

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

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

一、HTML标签中设置CSS变量

如下:

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

效果如下截图:

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

二、JS中设置CSS变量

如下,HTML示意:

如果要想让var(--color)生效,执行下面JavaScript代码即可:

box.style.setProperty('--color', '#cd0000');

也就是使用setProperty()方法,效果如下GIF截屏示意:

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

三、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变量

关于HTML标签和JS中怎么设置CSS3 var变量就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


文章题目:HTML标签和JS中怎么设置CSS3var变量
网页网址:http://scyanting.com/article/jshhdp.html