Javascript 更改html元素背景图像js

我在这里搜索了google和，但我无法准确找到问题的正确答案。我使用了以下代码：

html {
   background: url('../resources/imgs/bgs/mainbg.jpg') no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

我从互联网上获得了一个背景图像，它总是在中间，并且非常适合浏览器，效果很好，但我遇到了一个问题。我需要改变一个按钮点击的背景图像，但我不知道如何目标html标记，这是可能的吗？非常感谢：）

我的问题被标记为重复，但我的问题不仅仅是获取html元素的样式，而是仅使用纯javascript将其更改为与代码片段相同的样式，只需使用：

document.getElementsByTagName('html')[0].style.backgroundImage = "url('img_tree.png')";

---

使用jquery，您可以执行以下操作

$('html').on('click', function(){
    $('html').css({
      "background": "url('https://picsum.photos/1200/3300/?blur') no-repeat center center fixed",
      "background-size": "cover"
    });
});

---

您必须同时设置

backgroundImage

和

backgroundSize

属性。请尝试以下操作：

document.querySelector（“#btnSetImage”）.addEventListener（'click'，function（）{
var html=document.querySelector（'html'）；
html.style.backgroundImage=“url（'https://www.noodleman.co.uk/images/source/google_merchant_bulk_category_assign/google.jpg')";
html.style.backgroundSize='cover'；
});
Set Background Image
您可以使用
documentElement
直接访问html元素：


/*只需使用javascript更改图像源代码*/
document.querySelector（“#changeImage”）.addEventListener（'click'，function（）{
document.documentElement.style.backgroundImage='url（'https://www.fillmurray.com/400/400")';
});
CSS中的基本设置*/
html{
背景：url（'https://www.fillmurray.com/g/400/400'）没有固定的重复中心；
/*这将是一个灰度图像*/
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
比尔·默里！
ChangeImage

回答太快，我修正了：）不起作用新图像只是放在角落里，而不是整个screen@kriskotooBG因此，可以尝试：

document.getElementsByTagName（'html'）[0].style.background=“url（'img.png'）无重复中心修复”抱歉，我没有要求jquery解决方案，那么您可以使用javascript---document.getElementsByTagName（'html'）[0]添加两种不同的样式。style.background=“url（'）no repeat center fixed”；document.getElementsByTagName（'html'）[0].style.backgroundSize='cover'；谷歌输入的“javascript get html element”的可能副本可能会直接导致您找到该副本。请包含您尝试过的代码，它为我们提供了有关您尝试实现的内容的更多上下文，并使我们更容易确定您可能出了什么问题。