我正在使用 cookie 来确定用户是处于浅色模式还是深色模式加载 body 。如果找不到 cookie,我总是使用 light.less 作为后备/默认设置。所以在我的<head>
我有
<link rel="stylesheet" type="text/css" href="../assets/main.css">
<link rel="stylesheet/less" type="text/css" id="colorMode" href="../assets/light.less">
<script src="../assets/less.js/dist/less.min.js" type="text/javascript"></script>
我的body标签如下:
<body onload="checkNav(); checkCookies();" onresize="checkNav()">
checkCookies()
是查看cookie并采取相应行动的功能,如下所示。
function checkCookies() {
var style = getCookie("style");
if (style == 'dark') {
document.getElementById("colorMode").href = "../assets/dark.less";
document.getElementById("switchIcon").innerHTML = "toggle_on";
document.cookie = "style=dark; path=/~sam.walker";
}
else {
//Already set by default
}
}
getCookie()
函数简单地返回相关的样式 cookie
colorMode
href = ../assets/light.less
的样式表确实按预期更改为 ../assets/dark.less
正如我与检查员核实过的,但样式本身并没有发生物理变化。我已经检查过缓存,但与此无关。任何帮助将不胜感激。
最佳答案
将样式表包含为 .less
除非你有<script src="less.js" type="text/javascript"></script>
,否则格式将不起作用在 <head>
内添加页面的一部分。
从 Less.js 查看使用信息 here
关于javascript - 通过 JS 为 .less 样式表设置 href,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55576722/