HTA即HTML Application，是将HTML页面和脚本语言结合运行的桌面应用程序，在HTA中可以通过VBScript直接操作页面内的HTML元素，实现包括位置调整在内的各类动态效果。VBScript作为HTA内置支持的脚本语言，能够直接访问DOM对象，修改元素的样式属性，从而完成元素位置的动态控制。
HTA基础配置说明
要运行包含VBScript的HTA应用，首先需要正确配置HTA文件的基础结构，确保VBScript可以被正常解析执行。HTA文件需要以<hta:application>标签声明应用属性，同时指定脚本语言为VBScript。
基础的HTA文件结构如下，注意所有的HTML标签名称在正文描述中都需要转义：
<!DOCTYPE html>
<html>
<head>
<title>VBScript控制元素位置示例</title>
<hta:application
applicationname="PositionControl"
border="thin"
caption="yes"
showintaskbar="yes"
/>
<script language="VBScript">
' VBScript代码会写在这里
</script>
</head>
<body>
<div id="moveBox" style="width:100px;height:100px;background:#4CAF50;position:absolute;top:50px;left:50px;"></div>
<button onclick="MoveElement">移动元素</button>
</body>
</html>
VBScript操作HTML元素的方法
在VBScript中，可以通过Document.getElementById方法获取页面内的HTML元素对象，之后直接修改元素的style属性下的位置相关字段，就能调整元素的位置。常用的位置属性包括top和left，分别对应元素距离父容器上边和左边的距离，单位为像素。
获取元素对象
通过元素的id属性可以精准获取目标元素，示例代码如下：
' 获取id为moveBox的元素对象
Set targetElement = Document.getElementById("moveBox")
修改位置属性
获取到元素对象后，直接给style.top和style.left赋值即可修改位置，赋值需要带单位像素，示例代码如下：
' 将元素移动到距离上边100像素，左边200像素的位置 targetElement.style.top = "100px" targetElement.style.left = "200px"
完整动态控制示例
下面的示例实现了点击按钮后，让绿色方块每次向右移动30像素、向下移动20像素的效果，同时限制元素不会移出可视区域。
<!DOCTYPE html>
<html>
<head>
<title>动态控制元素位置</title>
<hta:application
applicationname="DynamicPosition"
border="thin"
caption="yes"
showintaskbar="yes"
windowstate="normal"
/>
<script language="VBScript">
' 定义移动步长
Dim stepX, stepY
stepX = 30
stepY = 20
Sub MoveElement
' 获取目标元素
Set box = Document.getElementById("moveBox")
' 获取当前位置数值，去掉px后缀
currentTop = CInt(Replace(box.style.top, "px", ""))
currentLeft = CInt(Replace(box.style.left, "px", ""))
' 计算新位置
newTop = currentTop + stepY
newLeft = currentLeft + stepX
' 获取HTA窗口高度和宽度，限制元素不超出可视区域
winHeight = Document.parentWindow.screen.availHeight
winWidth = Document.parentWindow.screen.availWidth
' 元素高度100px，宽度100px，计算最大可移动位置
maxTop = winHeight - 100
maxLeft = winWidth - 100
' 边界判断
If newTop > maxTop Then
newTop = 50
End If
If newLeft > maxLeft Then
newLeft = 50
End If
' 设置新位置
box.style.top = CStr(newTop) & "px"
box.style.left = CStr(newLeft) & "px"
End Sub
Sub ResetPosition
Set box = Document.getElementById("moveBox")
box.style.top = "50px"
box.style.left = "50px"
End Sub
</script>
<style>
body {
font-family: "微软雅黑";
padding: 20px;
}
button {
margin-top: 20px;
margin-right: 10px;
padding: 8px 16px;
}
</style>
</head>
<body>
<div id="moveBox" style="width:100px;height:100px;background:#4CAF50;position:absolute;top:50px;left:50px;"></div>
<button onclick="MoveElement">移动元素</button>
<button onclick="ResetPosition">重置位置</button>
</body>
</html>
注意事项
- 被控制位置的HTML元素需要设置
position属性为absolute或者relative，否则top和left属性不会生效。 - VBScript中处理字符串类型的像素值时，需要先去除
px后缀再转换为数值计算，否则会出现类型错误。 - HTA应用的窗口尺寸和屏幕可视区域尺寸可以通过
Document.parentWindow.screen对象获取，方便做边界限制。 - 如果需要在页面加载完成后自动执行位置初始化，可以在
body标签的onload属性中绑定VBScript子程序。