I have an HTA with loads of options. I have been able to change the color theme of the app with some Theme buttons using a combo of CSS and VBScript. However, I have been doing each element manually. Like this:
'********************************************************************
'* 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
When a user clicks the Matrix button it triggers the first sub which sets the variable values and calls the ChangeColor sub. The ChangeColor sub then goes through each ID and changes the values shown. Is there a way to name or tag each type of element (button, text, etc.) with the same tag and then change all of those items with a single command? Currently, I get an error message when more than one element has the same ID. I am pushing 30 buttons, and nearly two dozen text fields with more being requested. I would very much like to automate this a bit more.
Here's a theme selector example that uses 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>
To use GetElementsByClassName, replace the script section above with this code:
<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>