Javascript 删除<；风格>；使用JS添加新元素时的元素

我试图制作一个有3个按钮的页面，使背景改变颜色。理论上我知道怎么做。我一直在尝试构建更改背景颜色的方法，但每当我更改颜色时，这是因为新样式元素与旧样式元素重叠，所以我正在寻找一种方法，在创建新样式时删除前一个样式元素，但我尚未找到它

var backgroundColor={
红色：函数背景红色（）{
var sheet=document.createElement（'style'）；
sheet.setAttribute（'id'，'redBG'）；
sheet.innerHTML=“主体{背景颜色：红色；}”；
文件.正文.附件（页）；
},
蓝色：函数背景蓝色（）{
var sheet=document.createElement（'style'）；
sheet.setAttribute（'id'，'blueBG'）；
sheet.innerHTML=“主体{背景色：蓝色；}”；
文件.正文.附件（页）；
},
绿色：函数背景绿色（）{
var sheet=document.createElement（'style'）；
sheet.setAttribute（'id'，'greenBG'）；
sheet.innerHTML=“body{background color:limegreen；}”；
文件.正文.附件（页）；
},
deletePrevious:function（）{
// ???
},
};
变量applyColor={
applyRed:function（）{
//应用新背景色时删除前一种背景色的方法
背景色。红色（）；
},
applyBlue:function（）{
背景色。蓝色（）；
},
applyGreen:function（）{
backgroundColor.green（）；
}
}

不要更改整个CSS

标记，只需在

class`属性中设置一个值，该属性设置整个主题，并且所有CSS都基于该主题

body.theme-red{
背景色：红色；
}
body.theme-blue{
背景颜色：蓝色；
}
body.theme-green{
背景颜色：绿色；
}
.主题红h1{
颜色：黑色
}
.主题蓝h1{
颜色：黄色；
}
.主题绿h1{
颜色：红色；
}

你看起来很熟悉JS，如果你需要一个例子，请告诉我

用“themeCSS”做一个样式标签。然后，每次要添加/替换CSS时，请使用：

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

---

这样，它将始终取代以前的CSS:）

除非您有一些要求，否则我认为您可能会考虑过度。你试过在每次按下按钮时改变身体的颜色吗？例如

document.body.style.backgroundColor=“red”

您是否考虑过通过切换类来实现这一点？还使用了大量重复的代码