html 调用 javascript 变量 - Javascript (1)

📌 相关文章

📜 html 调用 javascript 变量 - Javascript (1)

📅 最后修改于: 2023-12-03 15:31:17.951000 🧑 作者: Mango

HTML 调用 JavaScript 变量 - JavaScript

在开发 web 应用时，经常需要在 HTML 页面中调用 JavaScript 变量。这篇文章将介绍如何在 HTML 页面中调用 JavaScript 变量。

使用 script 标签

可以把 JavaScript 代码放在一个 script 标签中，然后在 HTML 页面中使用该变量。

<!DOCTYPE html>
<html>
<head>
	<title>使用 script 标签调用 JavaScript 变量</title>
	<script>
		var message = "Hello World!";
	</script>
</head>
<body>
	<p>输出变量内容： 
		<script>document.write(message);</script>
	</p>
</body>
</html>

如上所示，首先在一个 script 标签中定义变量 message。然后在 HTML 标签中使用 script 标签，并在其中调用该变量。变量值会被写入到 HTML 页面中，输出"Hello World!"。

使用 data-* 属性

除了使用 script 标签，还可以使用 data-* 属性传递 JavaScript 变量。

<!DOCTYPE html>
<html>
<head>
	<title>使用 data-* 属性调用 JavaScript 变量</title>
	<script>
		var message = "Hello World!";
	</script>
</head>
<body data-message="message">
	<p>输出变量内容： 
		<script>
			var message = document.body.getAttribute("data-message");
			document.write(message);
		</script>
	</p>
</body>
</html>

如上所示，首先在 JavaScript 代码中定义变量 message。在 HTML 页面的 body 标签中添加 data-message 属性，并将其值设置为变量名 message。然后在 HTML 标签的 script 标签中调用该变量。变量值会被写入到 HTML 页面中，输出"Hello World!"。

使用 jQuery

使用 jQuery 是一种更方便的方法，可轻松在 HTML 页面中调用 JavaScript 变量。

<!DOCTYPE html>
<html>
<head>
	<title>使用 jQuery 调用 JavaScript 变量</title>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script>
		var message = "Hello World!";
	</script>
</head>
<body>
	<p>输出变量内容： <span id="message"></span></p>
	<script>
		$("#message").text(message);
	</script>
</body>
</html>

如上所示，首先在 JavaScript 代码中定义变量 message。在 HTML 页面中添加一个 span 标签，并设置其 id 为 message。然后使用 jQuery 来调用该变量，并将其写入到 span 标签中，输出"Hello World!"。

以上是 HTML 调用 JavaScript 变量的三种方法。通过这些方法，可以方便地在 HTML 页面中调用 JavaScript 变量，实现更好的 web 应用。