使用CSS3自定义属性实现换肤功能

最新推荐文章于 2025-08-29 17:13:22 发布

原创最新推荐文章于 2025-08-29 17:13:22 发布 · 2.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 #自定义属性 #换肤

html5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用CSS3自定义属性实现网页换肤功能。通过定义全局颜色变量并结合JavaScript，可以轻松改变页面主题颜色。适用于前端开发人员学习。

开始之前先说说css3的自定义属性，之前我们在写css的时候全部都是使用自身属性，比如margin,padding等。但是你曾是否见过这样的css

:root{
    --primary-color:#989898;
    --light:#fff;
    --dark:#000;
}

其中的–primary-color、–light、–dark就是自定义的属性。

自定义属性的命名规则

--variables-name:variables-value
--属性名:属性值
例如定义一个主题颜色：
--theme-color:red;

作用域

//:root作用于全局
:root{
    --theme-color:red;
}
//#app作用于id为app的节点内
#app{
    --theme-color:red;
}

使用方法 var(自定义属性名)

//现在全局定义
:root{
   --theme-color:red;
}

//使用的时候
#app{
    background-color:var(--theme-color);
}

//假如我们没有指定--theme-color这个属性，则可以在使用的时候加上替代值
#app{
    background-color:var(--theme-color,black);//没有指定--theme-color则会由black代替
}

通过JS获取和设置自定义的属性

//js中获取--theme-color的值
var styles = getComputedStyle(document.documentElement);
var value = styles.getPropertyValue("--theme-color");
console.log(value);//red

//js中更改--theme-color的值
document.documentElement.style.setProperty("--theme-color","black");

明白了这几个概念我们开始实现我们的换肤功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3自定义属性实现换肤功能</title>
    <style type="text/css">
        :root{
            --theme-color:#989898;
        }

        #header{
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: var(--theme-color);
            margin-bottom: 30px;
        }
        #header h1{
            color: #fff;
        }
        button{
            width: 100px;
            height: 30px;
            color: #fff;
            border:none;
        }
        #btn-red{
            --btn-red:red;
            background-color: var(--btn-red)
        }
        #btn-black{
            --btn-black:black;
            background-color: var(--btn-black)
        }
        #btn-blue{
            --btn-blue:blue;
            background-color: var(--btn-blue)
        }
    </style>
</head>
<body>
    <header id="header">
        <h1>CSS3自定义属性实现换肤功能Demo</h1>  
    </header>

    <div>
        <button id="btn-red">red</button>
        <button id="btn-black">black</button>
        <button id="btn-blue">blue</button>
    </div>

    <script type="text/javascript">
        var btns = document.getElementsByTagName("button");
        for(var i=0;i<btns.length;i++){
            btns[i].addEventListener("click",function(e){
                var ele = e.target||e.srcElement;
                var styles = getComputedStyle(ele);
                var value = styles.getPropertyValue("--"+ele.id);
                document.documentElement.style.setProperty("--theme-color",value);
            })
        }

    </script>
</body>
</html>