在 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>