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

Question

我正在尝试添加 "dark mode/light mode"。我正在尝试通过使用两种不同的 CSS 样式 sheet 并使用一个按钮来点击它们

来做到这一点

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

更改为灯光模式

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 更改为指定的内容

Answer 1

如果您只是将 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);  
}

Answer 2

您可以同时加载两个样式表，enable/disable 随意

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

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

Is it possible to change css stylesheets after a page has loaded?

javascript

css

function

stylesheet