Javascript 没有更改 HTML 背景图片

Question

我正在尝试使用 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;
}

如有任何帮助，我们将不胜感激！

Answer 1

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

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

Javascript 没有更改 HTML 背景图片

Javascript isn't changing HTML background image

html

javascript

css

jquery

styling