可选择的网站背景答案

【问题标题】：Selectable Website Background [closed]可选择的网站背景
【发布时间】：2015-03-06 23:57:55
【问题描述】：

如何在我的网站上添加一些内容，让用户可以从三种背景中进行选择？

我不知道这是否需要 Javascript、CSS 或 HTML（我对网页设计比较陌生）

（这是一个很简单的问题，但我没有通过谷歌找到它）

【问题讨论】：

标签： javascript html css web background-image

【解决方案1】：

试试这个方法。对于您想要的，它非常简单。这里我提供了一个下拉菜单，但您可以使用任何输入选择器。

<script type="text/javascript">
function switchBG(){
var img = document.getElementById("theSwitch").value;
var page = document.getElementById("pageBody");

if(img == 1){
    page.className = "bgOne";
} else if(img == 2){
    page.className = "bgTwo";
} else if(img == 3){
    page.className = "bgThree";
}
}
</script>

<style type="text/css">
.bgOne{
    background:url(1.png)
}
.bgTwo{
    background:url(2.png)
}
.bgThree{
    background:url(3.png)
}
</style>

<div id="pageBody" class="bgOne">
<select id="theSwitch" onchange="switchBG()">
  <option value="0">Choose Background</option>
  <option value="1">BG 1</option>
  <option value="2">BG 2</option>
  <option value="3">BG 3</option>
</select>
</div>

【讨论】：

当我使用这段代码时，它不会改变背景。它只会改变实际选项的背景。
我想让它改变身体的实际背景。
在你的 body 标签内添加类。抱歉，我是这么想的。很明显。将 div 更改为 body <body id="pageBody" class="bgOne"> 抱歉造成混淆

【解决方案2】：

我认为这个问题太宽泛了，但我还是会试一试:)

您可以使用此 JavaScript 将您网站的背景图片设置为 3 个（或更多）之一，其中 selectedImage 是所选图片的数组索引：

var bgImages = ['image1.png', 'image2.jpg', 'http://example.com/image3.gif'];
var selectedImage = 0;

document.body.style.backgroundImage = "url('" + bgImages[selectedImage % bgImages.length] + "')";

如果您想保存您的用户选择，您可以使用 cookies 或新的 HTML5 Web Storage API。

我想您想在页面加载时更新背景图片。为此，您可以将您的 javascript 放入 .您也可以将其放入，但您必须等待 'DOMContentLoaded' 事件，因为在此之前 document.body 将不可用。

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        //code goes here
    });
</script>

jquery 解决方案是

<script>
  $(document).ready(function(){
    //you code goes here
  });
</script>

在我看来，最好的办法是在服务器端完成所有这些工作（例如使用 php），但就您的标签而言，您似乎不是在寻找这样的解决方案。

我建议您查看此答案中的一些链接并尝试自己解决。请不要指望 stackoverflow 用户会为您编写所有代码。尝试分解您的问题并提出更具体的问题，例如“如何使用 javascript 更改背景图像”，我相信您会在这里找到大量答案...

【讨论】：