如何实现单次点击批量修改HTA中多个HTML元素的颜色？

方案1：按标签名批量筛选元素（无需修改现有HTML，新增元素自动适配） #

直接通过getElementsByTagName获取所有同类型标签，过滤出你需要的控件类型后批量修改样式，原来的HTML代码不需要做任何调整，后续新增元素也会自动生效：

Sub ChangeColor
  '设置全局样式
  document.bgColor=strColor1
  document.body.text=strColor2
  
  '批量修改所有按钮
  Set allInputs = document.getElementsByTagName("input")
  For Each elem In allInputs
    If elem.type = "button" Then
      elem.style.color = strColor6
      elem.style.backgroundColor = strColor5
    End If
  Next

  '批量修改所有文本框
  For Each elem In allInputs
    If elem.type = "text" Then
      elem.style.backgroundColor = strColor3
      elem.style.color = strColor2
      elem.style.borderColor = strColor4
    End If
  Next

  '批量修改所有下拉框
  Set allSelects = document.getElementsByTagName("select")
  For Each elem In allSelects
    elem.style.backgroundColor = strColor3
    elem.style.color = strColor2
    elem.style.borderColor = strColor4
  Next
End Sub

方案2：自定义class分组（适合部分元素不需要跟随主题切换的场景） #

如果你的页面里有部分控件不需要跟随主题变化，可以给需要适配主题的元素加上自定义class属性，比如：

<input type="button" value="提交" class="theme-btn">
<input type="text" class="theme-input">
<select class="theme-select"></select>

然后在VBScript里遍历匹配class的元素修改样式即可：

Sub ChangeColor
  document.bgColor=strColor1
  document.body.text=strColor2
  
  For Each elem In document.all
    Select Case elem.className
      Case "theme-btn"
        elem.style.color = strColor6
        elem.style.backgroundColor = strColor5
      Case "theme-input", "theme-select"
        elem.style.backgroundColor = strColor3
        elem.style.color = strColor2
        elem.style.borderColor = strColor4
    End Select
  Next
End Sub

方案3：直接修改CSS样式表规则（性能最高，控件再多也无卡顿） #

提前在HTML头部定义好主题相关的CSS规则，切换主题时直接修改样式表的规则值，不需要遍历任何元素，全局一次性生效，适合控件数量非常多的场景：

1. 先在HTML头部添加基础样式：

<style type="text/css">
  body { background: #000; color: #7fff00; }
  .theme-btn { background: #000; color: #7fff00; }
  .theme-input, .theme-select { background: #696969; color: #7fff00; border-color: #a9a9a9; }
</style>

2. 修改ChangeColor逻辑：

Sub ChangeColor
  Set styleSheet = document.styleSheets(0)
  '修改全局样式
  styleSheet.rules(0).style.backgroundColor = strColor1
  styleSheet.rules(0).style.color = strColor2
  '修改按钮样式
  styleSheet.rules(1).style.backgroundColor = strColor5
  styleSheet.rules(1).style.color = strColor6
  '修改输入框、下拉框样式
  styleSheet.rules(2).style.backgroundColor = strColor3
  styleSheet.rules(2).style.color = strColor2
  styleSheet.rules(2).style.borderColor = strColor4
End Sub

注意事项 #

• 如果你用<button>标签代替<input type="button">，直接用getElementsByTagName("button")获取按钮元素即可，不需要额外过滤type属性。
• 样式属性名使用驼峰写法（比如backgroundColor）兼容性更好，不推荐全小写写法。

内容的提问来源于stack exchange，提问作者Rikus Khan