如何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 标签?

在js中设置超链接中的onClick事件不可用,怎么弄

学习HTML5+CSS3+Javascript的第一周

如何在 Vue.js 中设置 optgroup 选择标签?

在 geometryReader 中设置 @State var

如何在 Jupyter notebook 中设置环境变量