关于<script></script>位置的问题
来源：3-5 显示和隐藏（display属性）
OLYLYL
2016-01-29 14:26
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display="none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display="block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>
</body>
</html>这个任务代码中，<script>…var mychar = document.getElementById("con");
…</script>在<p id="con">…</p>之前，按照浏览器从上到下的解析渲染顺序，此时javascript是无法获取id="con"的元素的，所以后边两个显示和隐藏的button应该没有反应才对，，，可是实际上，代码执行却没有任何问题，
比如下图：<script></script>位置在前在后，结果可大不一样啊
求解答！！
写回答
关注
3回答
-
- 寒星丶
- 2016-01-29 14:57:28
第一个例子因为有了 onclick="hidetext() 这句代码，会直接在全局寻找并执行hidetext() 这个函数 javascript代码所以在前在后没区别 第二个例子就像你说的一样，javascript代码在前面并未或得到con元素，所以返回值为空，在后面就获得了con的元素，所以有返回值
-
- JoeyQian
- 2016-01-29 14:53:30
貌似第一章讲过，通过事件调用执行的function对位置没什么要求。
-
- Mokung
- 2016-01-29 14:50:07
前一个代码执行没有问题是因为当button显示出来时，script标签已经加载完毕，可以执行，后一个的差异是因为当script标签在头部获取id时，body部分未加载出来，浏览器无法获取所以值为null。
JavaScript入门篇
JavaScript做为一名Web工程师的必备技术，本教程让您快速入门
741604 学习 · 9869 问题
相似问题