更改 html 元素背景图片 js

Question

我搜索了 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[=12= 将其更改为与代码片段相同的样式]

Answer 1

只需使用：

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

Answer 2

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

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

Answer 3

您必须同时设置 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';
});

<button type="button" id="btnSetImage">Set Background Image</button>

Answer 4

您可以直接使用 documentElement 访问 html 元素：

/*Just change the image source with javascript*/
document.querySelector('#changeImage').addEventListener('click', function() {
  document.documentElement.style.backgroundImage = 'url("https://www.fillmurray.com/400/400")';
});

/*Base settings in CSS*/

html {
  background: url('https://www.fillmurray.com/g/400/400') no-repeat center center fixed;
  /*This Would be a greyscale image*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<div style="color:#FFF;">Bill Murray!</div>
<!-- Just Some Content -->
<button id="changeImage">ChangeImage</button>

更改 html 元素背景图片 js

changing html element background image js

html

javascript

css

background-image