當單擊另一個選項卡（鏈接）並且用戶留在同一頁面上時，如何防止 CSS 發生變化？

Question

我做了一個按鈕，當它被點擊時，我網站的 colors 會改變（工作正常）。 但是，當單擊鏈接或刷新頁面時，它不會保存新的 css 顏色值，它只會 go 回到默認的頁面外觀。 請讓我知道如何保存這些值，以便在頁面刷新或單擊選項卡時不會更改。 感謝您提供的任何幫助:)

謝謝！！

function toggleDarkLight(event) {
  var body = document.getElementById("body");
  var currentClass = body.className;
  body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
 }

<body id="body" class="light-mode">
<button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode">dark</button></body>

Answer 1

你應該使用 localStorage

document.body.onload=function(){
        var mode = localStorage.getItem("mode")=="" ? mode="light-mode" :  mode=localStorage.getItem('mode');
        var body = document.getElementById("body");
        body.className = mode;
    }

    function toggleDarkLight(event) {
        var body = document.getElementById("body");
        var currentClass = body.className;
        body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
        localStorage.setItem("mode",body.className)
    }

當單擊另一個選項卡（鏈接）並且用戶留在同一頁面上時，如何防止 CSS 發生變化？

問題描述

1 個解決方案

解決方案1
1 2019-09-23 21:44:00

當單擊另一個選項卡（鏈接）並且用戶留在同一頁面上時，如何防止 CSS 發生變化？

問題描述

1 個解決方案

解決方案1 1 2019-09-23 21:44:00

解決方案1
1 2019-09-23 21:44:00