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

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();
                }
            }

这是我到目前为止编写的代码。问题是，当我运行它时，会发生以下情况:Overlapping elements

如何创建删除先前元素的方法？我应该将元素嵌套在 div 中吗？

编辑:事实证明我想得太多了。我学习JS已经有两个月了，还有很长的路要走。 Andrew Lohr 的评论有效地替换了我创建的所有backgroundColor 函数。我也是 StackOverflow 的新手，所以我还没有找到一种方法来支持他的评论。我需要更加熟悉 DOM 以及更简单的修改它的方法。

感谢大家的回复和帮助。

Answer 1

您看起来对 JS 很熟悉，所以请告诉我您是否需要示例。

使用“themeCSS”创建样式标签。然后，每次您想要添加/替换 CSS 时，请使用:

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

这样，它将始终替换以前的 CSS :)