JavaScript不会改变HTML背景图片

问题描述

我正在尝试使用Javascript创建“单击进入”页面，并且我有一个使用HTML构建的预先存在的主页。当用户转到主页时，我想隐藏主页的内容（在称为“ content”的div内），并显示另一个div的内容。我不得不隐藏显示div的问题，但是问题是我无法更改背景。

由于在我的css文件中，我添加了以html为样式的背景图片，但是当我执行document.querySelector('html').style.backgroundColor = 'black';时，它没有任何改变。在我的控制台中显示

element.style {
    background-color: black;
}

代替样式html{}。但是在我的控制台中，当我取消选中设置背景图像的框（基本上是不样式化）时，它会给我我想要的黑色背景。谁能帮我改写样式？下面的特定代码：

styles.css

html { 
    background: url("Testbg.png") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    cursor: pointer;
    z-index: -1;
}

javascript文件

document.addEventListener('DOMContentLoaded',function() {
    document.querySelector('#content').style.display = 'none';
    document.querySelector('html').style.backgroundColor = 'black';
});

控制台中显示的内容


element.style {
    background-color: black;
}

html {
    background: url(Testbg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    cursor: pointer;
    z-index: -1;
}

任何帮助将不胜感激！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript jquery styling