JS使用cookie设置样式的方法

2023年5月28日上午10:56 • JavaScript

使用cookie来设置样式的方法可以分为以下几步：
1. 当用户点击网页中的设置按钮时，应触发一个JavaScript事件。
2. 在JavaScript事件中，应该获取需要设置样式的标签元素。
3. 然后，应该使用JavaScript设置样式的方法，例如style属性或者classList。
4. 最后，将样式设置好的标签元素信息存储在cookie中。

下面是一个示例代码，假设我们要实现一个网页上的主题设置功能：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主题设置</title>
    <style>
        body.light {
            background-color: #fff;
            color: #333;
        }
        body.dark {
            background-color: #333;
            color: #fff;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <button id="light-theme">浅色主题</button>
    <button id="dark-theme">深色主题</button>
    <script>
        // 获取按钮元素并注册点击事件
        const lightBtn = document.getElementById('light-theme');
        const darkBtn = document.getElementById('dark-theme');
        lightBtn.addEventListener('click', setLightTheme);
        darkBtn.addEventListener('click', setDarkTheme);

        function setLightTheme() {
            document.body.classList.remove('dark');
            document.body.classList.add('light');
            document.cookie = "theme=light";
        }

        function setDarkTheme() {
            document.body.classList.remove('light');
            document.body.classList.add('dark');
            document.cookie = "theme=dark";
        }

        // 页面加载时，根据cookie设置主题
        function checkTheme() {
            const theme = getCookie('theme');
            if (theme) {
                document.body.classList.add(theme);
            }
        }

        // 获取cookie的值
        function getCookie(name) {
            const value = "; " + document.cookie;
            const parts = value.split("; " + name + "=");
            if (parts.length === 2) {
                return parts.pop().split(";").shift();
            }
        }

        // 页面加载完成后检查当前主题
        window.addEventListener('load', checkTheme);
    </script>
</body>
</html>

在这个示例代码中，当用户点击浅色主题按钮时，会触发setLightTheme()函数来设置主题。setLightTheme()函数会先将<body>标签上的“dark”样式类删除，再添加“light”样式类。最后，将当前主题的值“light”存储在cookie中。当用户点击深色主题按钮时同理。

在页面加载时，会调用checkTheme()函数来获取cookie中存储的主题信息，并将对应的样式类添加到<body>标签上，以修复因为刷新/重启浏览器等原因导致主题重置的问题。

这个示例代码会在用户在浏览器中保存cookie来做到跨会话间的持久的主题设置效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS使用cookie设置样式的方法 - Python技术站