如何在不同页面上进行对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;
};