如何一键更改多个 HTML 元素的颜色？

Question

我有一个带有大量选项的 HTA。我已经能够使用 CSS 和 VBScript 的组合，通过一些主题按钮更改应用程序的颜色主题。但是，我一直在手动完成每个元素。像这样：

'********************************************************************
'* ThemeTheMatrix - This subroutine sets the CSS styles to the Matrix theme.
'********************************************************************
Sub ThemeTheMatrix
  txtTheme = "Green"
  'Main Body 
  strColor1="Black"
  'Main Text 
  strColor2="Chartreuse"
  
  'TextBox Background 
  strColor3="DimGray"
  'TextBox Border 
  strColor4="DarkGray"

  'Button Background
  strColor5="Black"
  'Button Text
  strColor6=strColor2

  ChangeColor()
End Sub

'********************************************************************
'* ChangeColor - This subroutineapplies the colors set by one of the Theme subroutines.
'********************************************************************
Sub ChangeColor
  'Set Main Body colors
  document.bgColor=strColor1
  document.body.text=strColor2
  
  'Set Button colors
  btn1.style.color=strColor6
  btn1.style.backgroundcolor=strColor5

  btn2.style.color=strColor6
  btn2.style.backgroundcolor=strColor5
...
  'Set TextBox colors
  txt1.style.backgroundcolor=strColor3
  txt1.style.color=strColor2
  txt1.style.borderColor=strColor4

  txt2.style.backgroundcolor=strColor3
  txt2.style.color=strColor2
  txt2.style.borderColor=strColor4
...
  'Set DropDown colors
  Opt1.style.backgroundcolor=strColor3
  Opt1.style.color=strColor2
  Opt1.style.borderColor=strColor4

  Opt2.style.backgroundcolor=strColor3
  Opt2.style.color=strColor2
  Opt2.style.borderColor=strColor4
...
End Sub

当用户单击 Matrix 按钮时，它会触发设置变量值并调用 ChangeColor 子程序的第一个子程序。然后 ChangeColor sub 遍历每个 ID 并更改显示的值。有没有办法用相同的标签命名或标记每种类型的元素（按钮、文本等），然后用一个命令更改所有这些项目？目前，当多个元素具有相同的 ID 时，我会收到一条错误消息。我按下了 30 个按钮，还有将近两打的文本字段，还有更多请求。我非常想把它自动化一点。

Answer 1

这是一个使用 GetElementsByTagName 的主题选择器示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=9">
<hta:application id=oHTA
  icon=mspaint.exe
>
<script language="VBScript">
Sub ThemeChange
  Set oElements = document.GetElementsByTagName("input")
  For Each oElement in oElements
    If oElement.Type="button" Then oElement.ClassName = "b" & Theme.Value
    If oElement.Type="text" Then oElement.ClassName = "t" & Theme.Value
  Next
End Sub
</script>
<style>
.b1 {color:Green; width:6em}
.t1 {color:Blue; width:6em}
.b2 {color:Orange; width:6em}
.t2 {color:Red; width:6em}
.b3 {color:Pink; width:6em}
.t3 {color:Purple; width:6em}
</style>
</head>
<body>
<select id=Theme onchange=ThemeChange()>
  <option value=1>Theme 1</option>
  <option value=2>Theme 2</option>
  <option value=3>Theme 3</option>
</select><br><br>
<input type=button class=b1 value='Button 1'>
<input type=text class=t1 value='Text 1'><br><br>
<input type=button class=b1 value='Button 2'>
<input type=text class=t1 value='Text 2'><br><br>
<input type=button class=b1 value='Button 3'>
<input type=text class=t1 value='Text 3'><br><br>
</body>
</html>

要使用 GetElementsByClassName，请将上面的脚本部分替换为以下代码：

<script language="VBScript">
CurrentTheme = 1
Sub ThemeChange
  Set oElements = document.getElementsByClassName("b" & CurrentTheme)
  For Each oElement in oElements
    oElement.ClassName = "b" & Theme.Value
  Next
  Set oElements = document.getElementsByClassName("t" & CurrentTheme)
  For Each oElement in oElements
    oElement.ClassName = "t" & Theme.Value
  Next
  CurrentTheme = Theme.Value
End Sub
</script>

如何一键更改多个 HTML 元素的颜色？

How do I change the color of multiple HTML elements with one click?

html

javascript

css

vbscript

hta