jquery如何改变你的网站背景？答案

【问题标题】：Jquery how to change your website background?jquery如何改变你的网站背景？
【发布时间】：2014-03-20 11:30:01
【问题描述】：

在我的网站中，我有这样的 css：

body { 
  background: #FFF url(../images/bg.jpg) no-repeat center fixed;
}

所以它设置了我的背景图片，我想做的是当用户加载某个页面时，背景图片会发生变化，不仅是他当前所在的这个页面，而且是所有页面。

我该怎么做？

现在我有这样的脚本：

<script>
document.body.style.background="#FFF url('../images/bg2.png') no-repeat center fixed";
</script>

所以它改变了我的背景图片，但仅适用于当前页面，其他页面都加载了在 css 中定义的默认背景图片:(

我没有提到图像的名称是在我要更改该免费的页面中提供的，并且它是动态的

用户操作示例：在这里，我们要去像 www.example.com 这样的网站，并且有一些免费的我将页面更改为 www.example.com/account 我有相同的免费，当我去 www.example.com/change 我想更改我的免费图片，所以当我没有再次访问 www.example.com/account 时，图片也会更改

【问题讨论】：

这会将样式作为内联注入，因此请确保更改路径

标签： javascript jquery css web-site-project

【解决方案1】：

将您的script 写入一个文件，并使用<script> 标记将该文件包含在所有页面中。

或者其他解决方案是-

只需在所有页面中编写脚本！但我不认为你想做那些重复的工作，因为如果有一天你打算改变脚本，你必须在所有页面上都改变它。但是在我提到的第一个解决方案中，您只需在一个地方进行更改。

添加：

根据你的cmets，我能想到的是-

1- 创建一个全局变量，该变量在您网站上的所有页面中都是持久的。每次加载页面之前，请检查它是真还是假。如果是真的，请使用旧背景。如果它是假的，使用新的背景。默认保持为真，当你打开www.example.com/change页面时，你将它设置为假。

2- 将背景的 CSS 放在一个文件中。当您加载此www.example.com/change 页面时，请更改此文件的内容。

【讨论】：

那不可能，因为我只想在用户加载特定的 apge 时更改它，否则必须显示默认值，并且在操作后总是显示第二个
@Vardius 很难理解你在说什么，也许你没有正确地用英语表达它:)
就像这样：在这里我们要去像 www.example.com 这样的网站，并且有一些免费的我将页面更改为 www.example.com/account 我有相同的免费，当我去www.example.com/change 我想更改我的免费图像，所以当没有我再次访问 www.example.com/account 时，图像也会更改

【解决方案2】：

使用 HTML5 localStorage 来存储样式。

然后加载时：

$("body").css("background",localStorage.style);

【讨论】：

你能举个例子吗？
加载某个页面后，执行localStorage.style = "#FFF url('../images/bg2.png') no-repeat center fixed";之类的脚本。所以当用户加载另一个页面时，当$("body").css("background",localStorage.style);被执行时，会加载之前存储的样式。
在这里演示：jsfiddle.net/N5k6A 将$("body").css("background-color",localStorage.style); 放在您想要的页面上。

【解决方案3】：

 simply by : 

$('body').css('background','url(imagefile.png)');

【讨论】：

它会改变我在所有页面上的免费活动吗？在一个页面加载脚本后，另一个包含 css 样式的页面也会改变免费吗？
是的，它适用于所有页面，您只需将 javascript 页面包含在所有其他页面中！比如：ex.js 是具有上述代码的文件，你有 index1.html ， index2.html 等等..只需在所有页面中添加跨度>
好的，我知道我们在哪里误解了我没有提到图片的名称是在 www.example.com/change 页面中提供的，它是动态的

【解决方案4】：

试试这些

$(this).css('background-color', 'red');

或者这个

$(this).css("background", "url('../images/r-srchbg_white.png'))

或者这个

$(this).parent().css("background", "url('../images/r-srchbg_white.png') no-repeat");

【讨论】：

【解决方案5】：

您可以对所有页面使用默认布局......就像母版页......

仅在该母版页正文中，您将加载所有页面 html，

如果用户加载了该特定页面，则更改母版页的背景图像，更改将影响到所有页面，因为所有页面都继承自母版页。

【讨论】：