如何使用JavaScript函数更改HTML背景？_Javascript_Html_Image_Background

如何使用JavaScript函数更改HTML背景？

javascript html image

如何使用JavaScript函数更改HTML背景？,javascript,html,image,background,Javascript,Html,Image,Background,如何使用JavaScript函数更改HTML背景？我需要一些简单的函数将背景从一幅图像更改为另一幅图像？非常简单，如下所示： function changeBGImage(){ document.body.background = "image.jpg"; } function newBackGround (element,background) { element.style.backgroundImage = "url("+background+")"; } newBac

如何使用JavaScript函数更改HTML背景？我需要一些简单的函数将背景从一幅图像更改为另一幅图像？

非常简单，如下所示：

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

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

newBackground (myElement,"newBackground.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>


.bg1{
背景图片：url（images/my_image.jpg）；
}
函数更改bgImage（whichImage）{
document.getElementById（'page_body'）。className=“bg”+whichImage；
}

使用jquery的替代方法IFF

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

试着这样做：

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

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

newBackground (myElement,"newBackground.jpg");

演示代码：

element=document.querySelector（“body”）；
element.style.backgroundImage=“url（'https://cdn.xgqfrms.xyz/logo/logo.png')";
元素=document.queryselectoral（“div”）；
for（让元素中的元素）{
element.style.background=“url（'https://cdn.xgqfrms.xyz/logo/logo.png')";
}

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

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

首先，“背景”不是

DOM对象的属性，至少不是在所有浏览器中。CSS的答案应该是有效的，而且无论如何它都是正确的方法。@Pointy，他错过了

style

属性，应该是

document.body.style.backgroundImage=“url”（“+whichImage+”）我认为只为此导入整个库（jQuery）太过分了，这是正确的，因此我使用了IFF（当且仅当且粗体）jQuery！！