javascript - 如何在不同页面上传递对 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(或 cookies 或 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;
};