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

我正在尝试添加暗模式/亮模式。我正试图通过使用两个不同的CSS样式表和一个按钮来点击它们来实现这一点

我尝试过使用setAttribute、innerHTML、RemoveAttribute将一个样式表的内容移动到标记中，并尝试删除一个样式表

切换到灯光模式

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更改为所述的任何内容

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

顺便说一下，您的dark和light函数都使用相同的CSS，即LIGHTMODE.CSS，也许您希望在dark中使用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);  
}

---

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

<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加载时潜在地延迟