Question

现在CSS不仅支持自定义属性，而且还支持environment variables，我想知道如何使用javascript以编程方式更改它们。

以下示例将以(function($) { $(function() { $('video').hover(function() { this.play(); }, function() { this.pause() }); }); })(jQuery);颜色呈现文本。是否可以将其更改为其他颜色，例如5秒后使用setTimeout吗？

purple

div {
  color: env(PRIMARY, purple)
}

Answer 1

在:root中设置变量，然后在env中访问该变量，即可通过javascript对其进行修改。

var obj = document.getElementById("test");
setTimeout(function(){
    obj.style.setProperty("--primary","black");
},2000);

:root{
   color:env(--primary,red);
}

#test {
  color: var(--primary)
}

<div id="test">Hello world</div>

使用javascript以编程方式设置CSS`env（）`变量

1 个答案: