如何在不同頁面上進行對CSS樣式的更改

Question

因此，我正在創建一個網站，其中有多個頁面調用相同的CSS文件。 我正在合並一種方法來更改網站的背景圖像。 我已經使用javascript函數在每個頁面上本地工作：

function bgChange(bg) {
    document.body.style.background = bg;
}

在腳本部分中定義，然后實現它：

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('switchon','','images/switchonhl.jpg',1)" onclick="bgChange(this.style.backgroundImage)"
            style="background-image:url('images/woodbacklight.jpg')"><img src="images/switchon.jpg" width="50" height="50" id="switchon"></a>

但是，當您轉到網站上的其他頁面時，它會還原為原始圖像。 有沒有辦法在不同頁面上保持設置？

謝謝！

Answer 1

我的第一個想法是localStorage，但是可以直接在客戶端上修改localStorage。 如果您滿意，這是我的第一個建議（因為根據我的經驗，這很容易工作）。

在客戶端上存儲數據的一些可能方式：

1. 本地存儲
2. 會話存儲
3. 餅干

在服務器上存儲數據的一些可能方式：

1. 的MySQL
2. MongoDB
3. 雷迪斯

使用localStorage的示例（在每個頁面上）

(function () {
    // default background image
    if (!localStorage['bg']) localStorage['bg'] = "/path/to/some/default_image.png";

    document.body.style.background = localStorage['bg'];
})();

然后設置變量：

function changeBg(bg) {
    localStorage['bg'] = bg;
};

Answer 2

首先編輯您的代碼以將bg保存在localStorage（或cookie或sessionStorage）中

  function bgChange(bg) {
        document.body.style.background = bg;
        localStorage.setItem('bgcolor', bg);
    }

並將其添加到您擁有的每個頁面的頁面加載中。

document.onload = function(){
    bg = localStorage.getItem('bg');
    document.body.style.background = bg;
};