时间戳

首页 > 解决方案 > JS 中的主题切换器

javascript - JS 中的主题切换器

问题描述

我想将用户喜欢的主题（浅色/深色）保存在 cookie 中。有人可以帮我吗？我真的不擅长JS。我提交我当前的脚本。

样式表：

<link rel="stylesheet" href="custom.css" id="pagestyle2" type="text/css" charset="utf-8"/>
<link href="file-upload.css" id="pagestyle4" rel="stylesheet">
<link href="bootstrap.css" id="pagestyle3" rel="stylesheet">
<link href="hg.css" id="pagestyle" rel="stylesheet">

切换器：

<li class="nav-item" id="pagestylechoose">
    <a href="#" onclick="swapStyleSheet('dark.css');swapStyleSheet2('custom-dark.css');swapStyleSheet3('bootstrap-dark.css');swapStyleSheet4('file-upload-dark.css')"></a>
</li>

切换器JS：

    function swapStyleSheet(sheet) {
        document.getElementById('pagestyle').setAttribute('href', sheet);
    }
    function swapStyleSheet2(sheet) {
        document.getElementById('pagestyle2').setAttribute('href', sheet);
    }
    function swapStyleSheet3(sheet) {
        document.getElementById('pagestyle3').setAttribute('href', sheet);
    }
    function swapStyleSheet4(sheet) {
        document.getElementById('pagestyle4').setAttribute('href', sheet);
    }

标签： javascripthtmljquerycss

解决方案

我建议您在单击按钮时调用一个函数，特别是样式表名称无论如何都是硬编码的

<li class="nav-item" id="pagestylechoose">
    <a href="#" onclick="changeStyleToDark()"></a>
</li>

..

function changeStyleToDark() {
  document.cookie += "style=dark";
  swapStyleSheet('dark.css');
  swapStyleSheet2('custom-dark.css');
  swapStyleSheet3('bootstrap-dark.css');
  swapStyleSheet4('file-upload-dark.css');
}

function swapStyleSheet(sheet) {
    document.getElementById('pagestyle').setAttribute('href', sheet);
}
function swapStyleSheet2(sheet) {
    document.getElementById('pagestyle2').setAttribute('href', sheet);
}
function swapStyleSheet3(sheet) {
    document.getElementById('pagestyle3').setAttribute('href', sheet);
}
function swapStyleSheet4(sheet) {
    document.getElementById('pagestyle4').setAttribute('href', sheet);
}

现在要稍后阅读用户样式，您可以使用

function getUserStyle() {
  return getCookieByName("style");
}

function getCookieByName(cookieName) {
  var cookieString = RegExp(cookieName + "=[^;]+").exec(document.cookie);
  return decodeURIComponent(!!cookiestring ? cookiestring.toString().replace(/^[^=]+./,"") : "");
}

现在，在脚本的开头，每当页面加载时，检查 cookie 并调用changeStyleToDark它是否设置为dark.

window.onload = (event) => {
  if (getUserStyle() === "dark") changeStyleToDark();
};

推荐阅读