如何通過 JavaScript 函數取消設置和重置背景圖像？

Question

我希望能夠通過單擊按鈕將我的網站從淺色主題更改為深色主題。 背景圖像也應該改變。 當我點擊按鈕時，圖像確實發生了變化，但是一旦我向下滾動一點，淺色主題圖像就會重新出現在它的下方。 我嘗試將背景圖像屬性設置為無並將其重置為我想要的圖片，但這並沒有幫助。 還嘗試將backgroundAttachment 重置為none，然后恢復為fixed。

我是新手，所以代碼可能很亂！

在單擊背景圖像的按鈕 css 之前，如下所示：

width: 100%;
height: 100%;
margin: 0;
background-image: url('../images/background-calculator.jpg');
background-position: center;
background-size: cover;
background-color: rgba(255, 255, 255, 0.486);
background-blend-mode: overlay;
background-attachment: fixed;
display: inline-block;

之后我在一個 javascript 函數中通過 DOM 操作它：

body.style.width = "100%";
body.style.height = "100%";
body.style.backgroundImage = "none";
body.style.backgroundImage = "url('../images/darkmode.jpg')";
body.style.backgroundPosition = "center";
body.style.backgroundSize = "cover";
body.style.backgroundColor = "transparent";
body.style.backgroundBlendMode = "none";
body.style.backgroundAttachment = "fixed";
body.style.display = "inline-block";
body.style.position = "relative";

除了滾動部分，一切正常。

Answer 1

我認為可以通過在 DOM 中添加和刪除類來解決。 創建兩個對應背景的類。

.dark-bg{background-image: url('../images/background-calculator.jpg');} .light-bg{background-image: url('../images/background-dark.jpg') ;}

使用 JavaScript 應用淺色主題時刪除“dark-bg”，反之亦然