在HTML页面开发中，经常需要将JavaScript中定义的变量值展示到页面上，或者在不同逻辑块中访问对应的变量，这就需要掌握HTML中引用JavaScript变量的方法，同时理解JavaScript的作用域规则才能避免出错。
HTML中引用JavaScript变量的常用方法
1. 直接在script标签中操作DOM赋值
这是最基础的方式，先定义JavaScript变量，再通过DOM API获取HTML元素，将变量值赋值给元素的属性或内容。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>变量引用示例</title>
</head>
<body>
<div id="content"></div>
<script>
// 定义JavaScript变量
let userName = "张三";
let userAge = 25;
// 获取HTML元素
const contentDiv = document.getElementById("content");
// 将变量值赋值给元素内容
contentDiv.innerHTML = `姓名：${userName}，年龄：${userAge}`;
</script>
</body>
</html>
2. 在HTML事件属性中直接使用变量
如果变量处于全局作用域，可以直接在HTML元素的事件属性中调用变量或者传递变量作为函数参数。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>事件传参示例</title>
</head>
<body>
<script>
// 全局变量
let totalCount = 100;
function showCount(count) {
alert(`当前总数是：${count}`);
}
</script>
<!-- 直接在事件属性中传递全局变量 -->
<button onclick="showCount(totalCount)">查看总数</button>
</body>
</html>
3. 动态生成HTML内容时嵌入变量
在JavaScript中拼接HTML字符串时，可以将变量值嵌入到字符串中，再插入到页面里。
// 定义变量
let productName = "无线鼠标";
let productPrice = 89.9;
// 拼接包含变量的HTML字符串
let htmlStr = `<div class="product">
<p>商品名称：${productName}</p>
<p>商品价格：${productPrice}元</p>
</div>`;
// 插入到页面中
document.body.innerHTML += htmlStr;
JavaScript变量作用域规则
全局作用域
在函数外部、或者所有代码块外部定义的变量属于全局作用域，在页面的任何位置都可以访问，包括HTML的事件属性中也可以直接调用。
// 全局作用域变量
let globalVar = "我是全局变量";
function test() {
// 函数内部可以访问全局变量
console.log(globalVar); // 输出：我是全局变量
}
test();
// 全局位置也可以访问
console.log(globalVar); // 输出：我是全局变量
函数作用域
在函数内部使用var、let、const定义的变量，属于函数作用域，只能在当前函数内部访问，函数外部无法访问。
function func() {
let funcVar = "我是函数内部变量";
console.log(funcVar); // 输出：我是函数内部变量
}
func();
// 函数外部访问会报错
console.log(funcVar); // Uncaught ReferenceError: funcVar is not defined
块级作用域
使用let或者const在if、for等代码块中定义的变量，属于块级作用域，只能在当前代码块内部访问。
if (true) {
let blockVar = "我是块级作用域变量";
console.log(blockVar); // 输出：我是块级作用域变量
}
// 代码块外部访问会报错
console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
注意事项
- 如果变量定义在函数内部，想要在HTML中引用，需要先将变量挂载到全局对象
window上，否则无法直接访问。 - 使用
var定义的变量没有块级作用域，在代码块中定义的var变量会被提升到函数作用域或者全局作用域。 - 操作DOM赋值变量时，要确保DOM元素已经加载完成，否则会出现获取不到元素的问题，可以将脚本放在页面底部，或者使用
DOMContentLoaded事件。
总结：HTML中引用JavaScript变量的核心是通过DOM操作或者事件传参的方式，而作用域规则决定了变量可以被访问的范围，开发时需要根据变量的作用域选择合适的方式引用，避免出现变量未定义的错误。
HTMLJavaScript变量引用作用域变量作用域修改时间：2026-07-07 13:24:26