时间戳

首页 > 解决方案 > 页面加载后是否可以更改css样式表？

javascript - 页面加载后是否可以更改css样式表？

问题描述

我正在尝试添加“暗模式/亮模式”。我试图通过使用两个不同的 CSS 样式表并使用一个按钮来单击它们来做到这一点

我尝试使用 setAttribute、innerHTML、removeAtribute（将一个样式表的内容移动到标签中并尝试删除一个样式表）

更改为灯光模式

function light(){

    document.getElementById(css).setAttribute("href", "LIGHTMODE.CSS")
    document.getElementById(darkmode).innerHTML="Change to Light Mode"
    document.getElementById(darkmode).onclick="dark()"
    cos
}

function dark(){

            document.getElementById(css).href = "LIGHTMODE.CSS"
            document.getElementById(darkmode).innerHTML="Change to Dark Mode"
            document.getElementById(darkmode).onclick ="light()"
            console.log(darkmode)
    }

它应该通过 Id 识别并将 href 更改为声明的内容

标签： javascriptcssfunctionstylesheet

解决方案

您可以加载两个样式表，并随意启用/禁用它们

<link rel="stylesheet" href="darkmode.css" class="css dark">
<link rel="stylesheet" href="lightmode.css" class="css light" disabled>

<script>
    function setcssmode(s) {
        document.querySelectorAll('link.css').forEach(ss => {
            ss.disabled = !ss.classList.contains(s);
        })
    }
    setcssmode('dark');
    setcssmode('light');
</script>

在此示例中，轻量样式表在页面加载时被禁用。

这样做的好处是禁用的样式表仍然在页面加载时加载，因此切换将是即时的，而不是在加载替代样式的 CSS 时可能延迟

推荐阅读