<style> 使用 JS 添加新元素时删除元素

Question

我正在尝试制作一个具有3个使背景更改颜色的按钮的页面。我知道该怎么做。我一直在尝试构建更改背景颜色的方法，但是每当我更改颜色时，这是因为新样式元素重叠了旧的元素，因此，我正在寻找一种方法，当创建了新的，但我还没有找到它。

var backgroundColor = {
                red: function backgroundRed() {
                    var sheet = document.createElement('style');
                    sheet.setAttribute('id', 'redBG');
                    sheet.innerHTML = "body {background-color: red;}";
                    document.body.appendChild(sheet);
                },
                blue: function backgroundBlue() {
                    var sheet = document.createElement('style');
                    sheet.setAttribute('id', 'blueBG');
                    sheet.innerHTML = "body {background-color: blue;}";
                    document.body.appendChild(sheet);
                },
                green: function backgroundGreen() {
                    var sheet = document.createElement('style');
                    sheet.setAttribute('id', 'greenBG');
                    sheet.innerHTML = "body {background-color: limegreen;}";
                    document.body.appendChild(sheet);
                },
                deletePrevious: function() {
                   // ???
                   
                },
            };
            
            var applyColor = {
                applyRed: function() {
                    //a method that when applying a new background color deletes the previous one
                    backgroundColor.red();
                },
                applyBlue: function() { 
                    backgroundColor.blue();
                },
                applyGreen: function() {
                    backgroundColor.green();
                }
            }

这是我到目前为止写的代码。问题是，当我运行它时，这就是发生的事情：重叠元素

如何制作一种删除先前元素的方法？我应该在div中嵌套元素吗？

编辑：事实证明，我非常想象一下。我一直在学习JS大约两个月，还有很长的路要走。安德鲁·洛尔（Andrew Lohr）的评论有效地替换了我创建的所有背景色功能。我也是Stackoverflow的新手，所以我还没有找到一种方法来投票给他的评论。我需要更熟悉DOM和更简单的修改方法。

谢谢大家的回复和帮助。

Answer 1

您看起来像熟悉JS，所以告诉我是否需要一个例子。

用" themecss"制作样式标签。然后，每当您要添加/替换CSS时，请使用：

  themeCSS.innerHTML = "so {   and: so;  }";

这样，它将始终替换以前的CSS ：）

Answer 2

而不是更改整个CSS <style>标签，只是在 class`属性中设置一个值，该属性设置了整体主题，所有CSS都基于该主题。

body.theme-red {
  background-color: red;
}
body.theme-blue {
  background-color: blue;
}
body.theme-green {
  background-color: green;
}
.theme-red h1 {
  color: black
}
.theme-blue h1 {
  color: yellow;
}
.theme-green h1 {
  color: red;
}

或将CSS分解为三个文件，仅根据主题加载一个文件。

或将CSS分解为三个文件并使用替代样式表。