Javascript 不会改变 HTML 背景图像

Question

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

因为，在我的 css 文件中，我在html下添加了一个背景图像，当我执行document.querySelector('html').style.backgroundColor = 'black'; 尽管如此，它并没有改变任何东西。 在我的控制台中显示

element.style {
    background-color: black;
}

而不是样式html{} 。 但是在我的控制台中，当我取消选中设置背景图像（基本上没有样式）的框时，它会给我我想要的黑色背景。 谁能帮我覆盖样式？ 具体代码如下：

样式文件

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;
}

任何帮助将非常感激！

Answer 1

它应该只是background ，而不是backgroundColor它是两个不同的属性。 background-color只能设置为一种颜色。

document.querySelector('html').style.background = 'black';