【问题标题】：How to change HTML background with JavaScript Function?如何使用 JavaScript 函数更改 HTML 背景？
【发布时间】：2011-02-06 19:16:13
【问题描述】：

如何用 JavaScript 函数改变 HTML 背景？我需要一些简单的函数来将背景从一张图片更改为另一张图片？

【问题讨论】：

标签： javascript html image background

【解决方案1】：

试试这样的：

function newBackGround (element,background) {
   element.style.backgroundImage = "url("+background+")";
}

newBackground (myElement,"newBackground.jpg");

【讨论】：

【解决方案2】：

使用 jquery 的替代 IFF

$("body").css("background-image", "url(/image.jpg)");

【讨论】：

我认为只为此导入整个库（jQuery）是矫枉过正
这是正确的，因此我将 IFF（当且仅当，并且以粗体显示）jquery 正在使用中！

【解决方案3】：

像这样很简单：

function changeBGImage(){
     document.body.background = "image.jpg";
}

更新

或者如果你想使用 CSS（更优雅的解决方案），你可以使用：

<style>
.bg1 {
background-image: url(images/my_image.jpg); 
}
</style>

<body id="page_body">

<script>
function changeBGImage(whichImage){
     document.getElementById('page_body').className="bg"+whichImage;
}
</script>

【讨论】：

好吧，一方面，“背景”不是<body> DOM 对象的属性，至少在所有浏览器中都不是。但是，CSS 答案应该可以工作，而且无论如何它确实是正确的方法。

【解决方案4】：

演示代码：

element = document.querySelector("body");
element.style.backgroundImage =  "url('https://cdn.xgqfrms.xyz/logo/logo.png')";


elements = document.querySelectorAll("div");
for(let element of elements){
  element.style.background =  "url('https://cdn.xgqfrms.xyz/logo/logo.png')";
}

参考链接：

http://www.w3schools.com/jsref/dom_obj_style.asp http://www.w3schools.com/jsref/prop_style_background.asp http://www.w3schools.com/jsref/prop_html_style.asp http://www.w3schools.com/jsref/met_document_queryselectorall.asp http://www.w3schools.com/jsref/met_document_queryselector.asp https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll

【讨论】：

【解决方案5】：

所有这些答案都会改变身体。改变html背景最直接的方法是这样的：

const imagePath = "/img/sub-folder/my-image.png";
document.documentElement.style.background = `url("${imagePath}")`;

【讨论】：

【解决方案6】：

function changeBGImage(whichImage){
     document.body.style.backgroundImage = "url(" + whichImage + ")";
}

【讨论】：

@Pointy，他错过了style属性，应该是document.body.style.backgroundImage = "url(" + whichImage + ")";