HTML标签和JS中怎么设置CSS3var变量-创新互联-成都快上网建站

HTML标签和JS中怎么设置CSS3var变量-创新互联

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

成都创新互联网站建设提供从项目策划、软件开发,软件安全维护、网站优化(SEO)、网站分析、效果评估等整套的建站服务,主营业务为成都网站制作、做网站,重庆APP软件开发以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。成都创新互联深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

一、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://kswjz.com/article/dpsgcg.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流