JS操作CSS变量（var）动态改变颜色

最新推荐文章于 2024-03-29 17:46:47 发布

茹LYR

最新推荐文章于 2024-03-29 17:46:47 发布

阅读量9.4k

点赞数 4

分类专栏： CSS JS 文章标签： var（--color）动态改变css变量公用颜色引用

本文链接：https://blog.csdn.net/qq_43155489/article/details/100020687

版权

JS 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

css设置公用颜色–color，css中的引用方法var(–color)。
根据 root.setAttribute(‘style’, ‘–color: #e74c3c’) 可修改–color的参数。
例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root {
            --color: #7f8c8d;
            --spacing: 20px;
        }
        div.colors{
            height: 100px;
            width: 100px;
            background-color: var(--color);
            padding: var(--spacing);
        }
    </style>
</head>
<body>
<div class="colors">

</div>
<div class="actions">
    <a class="red">div红色</a>
    <a class="blue">div蓝色</a>
</div>
</body>
<script>
    var btnColorRed = document.querySelector('.red');
    var btnColorBlue = document.querySelector('.blue');
    var root = document.querySelector(':root');
    btnColorRed.addEventListener('click', function() {
        root.setAttribute('style', '--color: #e74c3c');
    });

    btnColorBlue.addEventListener('click', function() {
        root.setAttribute('style', '--color: #3498db');
    });
</script>
</html>

茹LYR

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
3
评论
JS操作CSS变量（var）动态改变颜色

css设置公用颜色–color，css中的引用方法var(–color)。根据 root.setAttribute(‘style’, ‘–color: #e74c3c’) 可修改–color的参数。例子如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫