如何HTML标签和JS中设置CSS3 var变量
Posted web瞎搞
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何HTML标签和JS中设置CSS3 var变量相关的知识,希望对你有一定的参考价值。
一、html标签中设置CSS变量
如下:
<div style="--color: #cd0000;"> <img src="mm.jpg" style="border: 10px solid var(--color);"> </div>
二、JS中设置CSS变量
如下,HTML示意:
<div id="box"> <img src="mm.jpg" style="border: 10px solid var(--color);"> </div>
如果要想让var(--color)
生效,执行下面javascript代码即可:
box.style.setProperty(‘--color‘, ‘#cd0000‘);
三、JS中获取CSS变量
JS中获取CSS变量可以使用getPropertyValue()
方法,示意:
// 获取 --color CSS 变量值 var cssVarColor = getComputedStyle(box).getPropertyValue(‘--color‘); // 输出cssVarColor // 输出变量值是:#cd0000 console.log(cssVarColor);
以上是关于如何HTML标签和JS中设置CSS3 var变量的主要内容,如果未能解决你的问题,请参考以下文章
Laravel 5.2:如何在刀片模板中设置变量,没有 php 标签?