CSS var 函数

CSS About 880 words

CSS

.test{
    background-color: var(--bgColor, red);
}

JS

document.body.style.setProperty("--bgColor", "green");

注意

设置在body标签的属性，将是一个全局属性，更多时候可以设置为某个单独标签的属性。

另外，要在body中设置，记得在文档初始化完成后再执行JavaScript代码。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            background-color: var(--bgColor, red);
        }
    </style>
</head>
<body>
<div class="test">
    aaa
</div>
</body>
<script>
        document.body.style.setProperty("--bgColor", "green");
</script>
</html>

补充

Angular中的组件中，可以给某个特定的component设定。

constructor(private elementRef: ElementRef) {}

ngAfterViewInit(){
    this.elementRef.nativeElement.style.setProperty("--bgColor", "green");
}

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/var()

Views: 2,340 · Posted: 2021-11-19

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓