css background - 书闪Bookchips

36 - 全局变量 - root{} - 主题一键切换

作者：

贺及楼

成为作者

更新日期：2022-06-10 17:23:22

主题一键切换

<!DOCTYPE html>
<head>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="css/A.css" id="changecss">
    <link rel="stylesheet" type="text/css" href="css/home.css">
</head>
<body>
    <div>
        <div class="sizee aaaa"></div>
        <div class="sizee bbbb"></div>
        <div class="sizee cccc"></div>
        <button id="bu1">A</button>
        <button id="bu2">B</button>
    </div>
</body>
<script>
    $("#bu1").click(function(){
        filename = "A"
        $("#changecss").attr("href","css/"+ filename +".css")
    })
    $("#bu2").click(function(){
        filename = "B"
        $("#changecss").attr("href","css/"+ filename +".css")
    })
</script>
<style>
.sizee{
    width: 100px;
    height: 100px;
}
</style>

A主题

/* 全局变量 */
:root{
    --AAA:#ff00ff;
    --BBB:#ff00ff9b;
    --CCC:#f700ff4b;
}

B主题

:root{
    --AAA:#0400ff;
    --BBB:#0011ff9b;
    --CCC:#002fff4b;
}

直接使用全局变量

.aaaa{
    background-color: var(--AAA);
}
.bbbb{
    background-color: var(--BBB);
}
.cccc{
    background-color: var(--CCC);
}