Question

我正在尝试创建一个包含3个按钮的页面，使背景更改颜色。理论上我知道如何做到这一点。我一直在尝试构建改变背景颜色的方法，但每当我改变颜色时，都是因为新的样式元素与旧样式元素重叠，所以我正在寻找一种方法来删除前一个元素。新的一个已创建，但我还没有找到它。

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

  var backgroundColor = {＆＃xD;＆＃xA; ＆＃的xD;＆＃XA; red：function backgroundRed（）{＆＃xD;＆＃xA; var sheet = document.createElement（'style'）;＆＃xD;＆＃xA; sheet.setAttribute（'id'，'redBG'）;＆＃xD;＆＃xA; sheet.innerHTML =“body {background-color：red;}”;＆＃xD;＆＃xA; document.body.appendChild（片材）;＆＃的xD;＆＃XA; }，＆＃的xD;＆＃XA; blue：function backgroundBlue（）{＆＃xD;＆＃xA; var sheet = document.createElement（'style'）;＆＃xD;＆＃xA; sheet.setAttribute（'id'，'blueBG'）;＆＃xD;＆＃xA; sheet.innerHTML =“body {background-color：blue;}”;＆＃xD;＆＃xA; document.body.appendChild（片材）;＆＃的xD;＆＃XA; }，＆＃的xD;＆＃XA;绿色：功能backgroundGreen（）{＆＃xD;＆＃xA; var sheet = document.createElement（'style'）;＆＃xD;＆＃xA; sheet.setAttribute（'id'，'greenBG'）;＆＃xD;＆＃xA; sheet.innerHTML =“body {background-color：limegreen;}”;＆＃xD;＆＃xA; document.body.appendChild（片材）;＆＃的xD;＆＃XA; }，＆＃的xD;＆＃XA; deletePrevious：function（）{＆＃xD;＆＃xA; // ???＆＃xD;＆＃xA; ＆＃的xD;＆＃XA; ＆＃的xD;＆＃XA; }，＆＃的xD;＆＃XA; };＆＃的xD;＆＃XA; ＆＃的xD;＆＃XA; var applyColor = {＆＃xD;＆＃xA; applyRed：function（）{＆＃xD;＆＃xA; //一种方法，当应用新的背景颜色时删除前一个＆＃xD;＆＃xA; backgroundColor.red（）;＆＃的xD;＆＃XA; }，＆＃的xD;＆＃XA; applyBlue：function（）{＆＃xD;＆＃xA; backgroundColor.blue（）;＆＃的xD;＆＃XA; }，＆＃的xD;＆＃XA; applyGreen：function（）{＆＃xD;＆＃xA; backgroundColor.green（）;＆＃的xD;＆＃XA; }＆＃的xD;＆＃XA; }

＆＃的xD;＆＃XA;

＆＃的xD;＆＃XA; 
＆＃XA;＆ #xA; 这是我到目前为止编写的代码。问题是，当我运行它时，会发生以下情况：重叠元素 
＆＃xA;＆＃xA; 如何制作删除先前元素的方法？我应该将元素嵌套在div中吗？
＆＃xA;＆＃xA; 编辑：结果我疯狂地过度思考这个问题。我现在已经学习了大约2个月的JS，还有很长的路要走。 Andrew Lohr的评论有效地取代了我创建的所有backgroundColor函数。我也是StackOverflow的新手，所以我还没有找到一种方式来评价他的评论。我需要更多地了解DOM以及更简单的修改方法。 
＆＃xA;＆＃xA; 感谢大家的回复和帮助。＆＃xA;

Answer 1

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

使用'themeCSS'创建样式标记。然后，每次要添加/替换CSS时，请使用：

Option Explicit

Private Sub CommandButton1_Click()
' Purpose: Change view between given image and no image
Dim sImgName As String                     ' picture name string
sImgName = "C:\Temp\MyPicture.gif""        ' <<< choose your picture name"
With Me.Image1
  If .Picture Is Nothing Then             ' picture property has been cleared already
     .Picture = LoadPicture(sImgName)
  Else                                    ' a picture is already displayed
     .Picture = LoadPicture(vbNullString) ' clear it now
  End If
End With
End Sub

这样，它总会替换以前的CSS：）

Answer 2

只需在<style> class`属性中设置一个设置整体主题的值，而不是更改整个CSS 标记，并且所有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分成三个文件并使用Alternate Style Sheets。

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

2 个答案: