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

【问题标题】：Is it possible to change css stylesheets after a page has loaded?页面加载后是否可以更改 css 样式表？
【发布时间】：2019-09-12 01:05:08
【问题描述】：

我正在尝试添加“暗模式/亮模式”。我试图通过使用两个不同的 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 更改为声明的内容

【问题讨论】：

How to load up CSS files using Javascript?的可能重复

标签： javascript css function stylesheet

【解决方案1】：

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

<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 时可能延迟

【讨论】：

【解决方案2】：

如果您只是将href 添加到现有元素，浏览器将不会自动获取新的 CSS。

顺便说一句，您的 dark 和 light 函数都使用相同的 CSS 即 LIGHTMODE.CSS ，也许您想在黑暗中使用 DARKMODE.CSS

function dark(){
 // Get HTML head element 
        var head = document.getElementsByTagName('HEAD')[0];  

        // Create new link Element 
        var link = document.createElement('link'); 

        // set the attributes for link element  
        link.rel = 'stylesheet';  

        link.type = 'text/css'; 

        link.href = 'DARKMODE.CSS';  

        // Append link element to HTML head 
        head.appendChild(link);  
}

【讨论】：