javascript - 通过 JS 为 .less 样式表设置 href

标签 javascript html css less

我正在使用 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/

相关文章:

javascript - window.location.assign(url) 和 window.open(url, '_self') 的区别

javascript - 存在的函数被列为 "undefined"

html - 将 HTML5 用于新网站

html - 将内联 block DIV 居中

javascript - 该网站的滚动功能是如何实现的?

javascript - 通过单击弹出内容更改表格类

javascript - 如何修改此脚本,使其在页面首次加载和更改时起作用?

javascript - hr在移动端div后面

html - 简单的 css 问题 - 粘性页脚等

html - 有没有一种简单的方法可以使用 css 来对比图像上的文本?