4.Vue风格切换

最新推荐文章于 2023-06-02 15:16:51 发布

what's your name.

最新推荐文章于 2023-06-02 15:16:51 发布

阅读量694

点赞数 1

本文链接：https://blog.csdn.net/weixin_45874347/article/details/122831405

版权

Vue学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

第一种方式：切换 class

1：定义样式。

<style>
    .dark .ksdui-container1 { background: #000000; height: 100px; }
    .dark .ksdui-link { color: #fff; }
    .light .ksdui-container1 { background: #fff; height: 100px; }
    .light .ksdui-link { color: #333; }
</style>

2：实现切换。

<body class="dark">
<div class="ksdui-container1">
    <a href="" class="ksdui-link">我是一个div</a>
</div>
<button class="changeTheme">切换风格</button>
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        $(".changeTheme").on("click", function () {
            if ($("body").hasClass("dark")) {
                $("body").removeClass("dark").addClass("light");
            } else {
                $("body").removeClass("light").addClass("dark");
            }
        })
    })
</script>
</body>

3：测试结果。
在这里插入图片描述

第二种方式：切换 css

1：定义样式。

app-blue.css：

.ksdui-container1 { background: blue; height: 100px; }
.ksdui-link { color: #fff; }

app-red.css：

.ksdui-container1 { background: #ff0000; height: 100px; }
.ksdui-link { color: #fff; }

2：引入样式。

<link rel="stylesheet" href="css/app.css" id="theme-style">

3：实现切换。

<div class="ksdui-container1">
    <a href="" class="ksdui-link">我是一个div</a>
</div>
<button class="changeTheme" data-css="app.css">切换风格-default</button>
<button class="changeTheme" data-css="app-red.css">切换风格-red</button>
<button class="changeTheme" data-css="app-blue.css">切换风格-blue</button>
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        var cssLink = window.localStorage.getItem("ksd-site-theme");
        if (cssLink) {
            $("#theme-style").attr("href", "css/" + cssLink);
        }
        $(".changeTheme").on("click", function () {
            var cssLink = $(this).data("css");
            $("#theme-style").attr("href", "css/" + cssLink);
            window.localStorage.setItem("ksd-site-theme", cssLink);
        })
    })
</script>

4：测试结果。
在这里插入图片描述

第三种方式：双重肯定

1：定义样式。

<style>
    .page.dark { --container-bg: #000; --text-color: #fff; }
    .page.light { --container-bg: #fff; --text-color: #333; }
    .page.dark .ksdui-container1 { background: var(--container-bg); height: 100px; }
    .page.dark .ksdui-link { color: var(--text-color); }
    .page.light .ksdui-container1 { background: var(--container-bg); height: 100px; }
    .page.light .ksdui-link { color: var(--text-color); }
</style>

2：实现切换。

<body class="page dark">
<div class="ksdui-container1">
    <a href="" class="ksdui-link">我是一个div</a>
</div>
<button class="changeTheme">切换风格</button>
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        var cssLink = window.localStorage.getItem("ksd-site-theme");
        if (cssLink) {
            $("body").removeClass("dark light").addClass(cssLink);
        }
        $(".changeTheme").on("click", function () {
            if ($("body").hasClass("dark")) {
                $("body").removeClass("dark").addClass("light");
                window.localStorage.setItem("ksd-site-theme", "light");
            } else {
                $("body").removeClass("light").addClass("dark");
                window.localStorage.setItem("ksd-site-theme", "dark");
            }
        })
    })
</script>
</body>

3：测试结果。
在这里插入图片描述

what's your name.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
4.Vue风格切换

第一种方式：切换 class1：定义样式。<style> .dark .ksdui-container1 { background: #000000; height: 100px; } .dark .ksdui-link { color: #fff; } .light .ksdui-container1 { background: #fff; height: 100px; } .light .ksdui-link { color: #333; }</s
复制链接

扫一扫