在 css 文件之间切换 (onclick) javascript

Question

我有一个简单的 function 通过单击站点上的按钮在两个不同的 css 文件之间切换。 当我单击一次时，css 被另一个替换。 但是当我第二次点击时，第一个css没有恢复。 所以换句话说，我需要点击一个相同的按钮，我改变了主题 css（例如蓝色和绿色，反之亦然）。 我尝试了数十种变体，但我是 JS 新手，对此有一些困难。 这是我的代码

function switchTheme() {
    let css = document.getElementById('css_file').href = "css/style.css";
    if (css) {
        return document.getElementById('css_file').href = "css/green-theme.css";
    } 
}
let changeButton = document.querySelector(".change_theme");
changeButton.addEventListener('click', switchTheme);

Answer 1

在这里，试试这个代码：

function switchTheme() {
    let css = document.getElementById('css_file').href;
    if (css == "css/style.css" ) {
        return document.getElementById('css_file').href = "css/green-theme.css";
    } 
    else {
    return document.getElementById('css_file').href = "css/style.css";
    }
}
let changeButton = document.querySelector(".change_theme");
changeButton.addEventListener('click', switchTheme);

Answer 2

原因很简单：您没有适当的代码来切换回来。 它应该看起来更像这样（未经测试）：

var currentState = true;
function switchTheme() {
    if (currentState) {
        document.getElementById('css_file').href = "css/green-theme.css";
    } 
    else{
        document.getElementById('css_file').href = "css/style.css";
    }
    currentState = !currentState;
}
let changeButton = document.querySelector(".change_theme");
changeButton.addEventListener('click', switchTheme);

问题是您总是将其设置为正常主题，然后返回到绿色主题，这没有任何意义，因为这没有任何改变。 如果您当前使用普通主题，您想要做的是保存，如果是这种情况，则启用绿色主题，否则启用普通主题。 currentState = !currentState表示您将当前 state 设置为其相反的值，因此如果它是 false 则为 true，如果为 true，则为 false。

您的旧代码所做的是：

function switchTheme() { //Button was pressed
    let css = document.getElementById('css_file').href = "css/style.css";//Set the 
    //current theme to the normal one. Because it's css = href = "style", you set css to "style" (I think, or maybe just true because it's a valid operation, so don't quote me on that)
    if (css) { //If css contains something true, this code is executed.
    //Note that css is always "[...]style", so it's always a non-empty string which is true
        return document.getElementById('css_file').href = "css/green-theme.css"; //Then set the style to green - this always happens so you can essentially delete every other line and nothing would change.
    } 
}

Answer 3

运算符a=b不检查相等性，而只是将b影响到a所以document.getElementById('css_file').href = "css/style.css"没有按照您的设想进行。

要检查某些内容，请使用=== ：

 function switchTheme() { const file = document.getElementById('css_file') let isStyle = file.href === "css/style.css" let path if (isStyle) { path = "css/green-theme.css" } else { path = "css/style.css" } file.setAttribute('href', path) } let changeButton = document.querySelector(".change_theme"); changeButton.addEventListener('click', switchTheme);

 <button class="change_theme"> change_theme </button> <a id="css_file" href="css/style.css"></a>