JS代码放在head和body中的区别分析

最新推荐文章于 2022-08-30 21:19:24 发布

前端分享会

最新推荐文章于 2022-08-30 21:19:24 发布

阅读量234

点赞数

分类专栏： js分享文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43905830/article/details/105169411

版权

js分享专栏收录该内容

21 篇文章 0 订阅

订阅专栏

最近也是学习js突然遇到了一个问题，js代码写下body中和head中运行的结果不一样，用简单的一句话介绍就是加载顺序的问题。如果放入head，那当页面加载head部分的时候，那个控件都还没有被定义，你能得到的只可能是一个undefind。如果放入控件后面，则达到了所想的结果，此时控件已经定义完成可以被访问。

下面展示一些 内联代码片。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/new.js"></script>
		<!--<link rel="stylesheet" type="text/css" href="css/new.css"/>-->
		<script type="text/javascript">
			var d1 = document.getElementById("div1");
			function myfun1() {
				d1.style.background = "red"
				d1.innerHTML = "cwc";
			}
			var but = document.getElementById("an1");
			but.addEventListener("click", myfun1);
		</script>
	</head>

	<body >
		<!--<h1 >Snapshots</h1>
		<ul>
		<div id="div1" style="width: 300px; height: 300px; background: green;">
		</div>
		<input type="button" value="按钮" id="an1" />
		
		*控件定义完成
		<script type="text/javascript">
			var d1 = document.getElementById("div1");
			function myfun1() {
				d1.style.background = "red"
				d1.innerHTML = "cwc";
			}
			var but = document.getElementById("an1");
			but.addEventListener("click", myfun1);
		</script>
	</body>
</html>