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