html代码：
<body>
<button id="button">点击我</button>
<img id="image" src="cat.png" width="100px">
</body>
JS代码：
<script>
var button = document.getElementById("button"),
image = document.getElementById("image");
button.onclick = function () {
image.style.display = "none";
};
</script>
需要实现的效果：单击button按钮时image消失。
我的做法：相关代码如上面所示，把js代码放在<head>中，于是报错Uncaught TypeError: Cannot set property 'onclick' of null。
改进做法：把JS代码放到</body>结束之前，完美实现。
提问：为什么会出现这种情况？是不是与JS代码的执行顺序有关。
解答：通过查阅一些资料，了解到放在<head>中的JS代码是优先于页面被执行的：
来源：点击打开链接
另一种方法也可达到目的：把原本的JS代码放入window.οnlοad=function() { ... }中，window.onload表示页面加载完成后执行的函数，这样JS代码即使放在<head>中也可以完美实现效果。
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
