如何更改html元素背景图像js?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (168)

我已经搜索过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 elemem的样式,而是只使用纯javascript更改它,就像修改代码片段一样。

提问于
用户回答回答于

你必须同时设置backgroundImagebackgroundSize。尝试以下几点:

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>

用户回答回答于

你可以通过以下方式直接访问html元素documentElement:

/*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>

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励