您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
一纸荒年 发布于2019年12月02日 23:38

原创 JavaScript输出

24 次浏览 读完需要≈ 6 分钟 JavaScript

内容目录

JavaScript 数据显示

JavaScript 没有任何打印或者输出的函数,可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

window.alert()

<!DOCTYPE html>
<html>
<body>
	<h1>标题</h1>
	<p id="demo">一个段落</p>
	<button type="button" onclick="hit()">尝试一下</button>
	<script>
		function hit() {
		   alert("触发点击函数");
		}
	</script>
	</body>
</html>

运行代码

document.write()

使用 document.write() 方法将内容写到 HTML 文档中。此功能可用于写入文本和HTML。

<!DOCTYPE html>
<html>
<body>
	<h1>标题</h1>
	<p id="demo">一个段落</p>
	<script>
		document.write("通过script标签显示");
	</script>
	</body>
</html>

运行代码

请使用 document.write() 仅仅向文档输出写内容,如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

操作 HTML 元素

该例子通过使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容。

<!DOCTYPE html>
<html>
<body>
	<h1>标题</h1>
	<p id="demo">一个段落</p>
	<script>
		// 使用 id 属性来查找 HTML 元素
		var param = document.getElementById("demo");
		// 修改元素的 HTML 内容
		param.innerHTML = "已修改段落。"; 
	</script>
</body>
</html>

运行代码

console.log()

如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单,能够让你看到你在页面中的输出内容,相对来说更加容易调试javascript代码,因为页面操作不会打断,而alert则会打断页面操作,对于查找及减少bug(错误)的过程不是很方便。

<!DOCTYPE html>
<html>
<body>
	<h1>标题</h1>
	<p id="demo">一个段落</p>
	<script>
		console.log("浏览器调试窗口中Console菜单显示");
	</script>
</body>
</html>

运行代码

  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论