如何通过JavaScript函数取消设置和重置背景图像？

我想能够改变我的网站从一个轻主题到一个黑暗的主题通过一个按钮点击。背景图像也应该改变。当我点击按钮时，图像确实发生了变化，但一旦我向下滚动一点，灯光主题图像就会在其下方重新出现。我尝试将背景图像属性设置为“无”，并将其重置为我想要的图片，但这没有帮助。还尝试将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";

---

除了滚动部分之外，其他一切都可以正常工作。

我认为可以通过向DOM添加和删除类来解决这个问题。 创建两个与背景相对应的类

.dark bg{background image:url（'../images/background calculator.jpg'）；} .light bg{background image:url（'../images/background dark.jpg'）；}

---

使用JavaScript应用浅色主题时删除“深色背景”，反之亦然。这很有效，谢谢！尽管更简单的版本是将高度设置为自动