更改html元素背景图像js
更改html元素背景图像js
提问于 2018-07-15 21:38:32
我已经在谷歌上搜索过了，但我无法准确地找到我的问题的正确答案，我使用了以下代码：
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将其更改为与代码片段相同的样式。
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-07-15 22:21:49
您必须同时设置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>
Stack Overflow用户
发布于 2018-07-15 21:39:54
只需使用：
document.getElementsByTagName('html')[0].style.backgroundImage = "url('img_tree.png')";Stack Overflow用户
发布于 2018-07-15 22:05:23
使用jquery，您可以执行以下操作
$('html').on('click', function(){
$('html').css({
"background": "url('https://picsum.photos/1200/3300/?blur') no-repeat center center fixed",
"background-size": "cover"
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51348920
复制相关文章
相似问题
腾讯云开发者
