为什么js代码放在head中报错，放在body中却能正常调用

最新推荐文章于 2022-06-07 23:00:43 发布

在线小白www

最新推荐文章于 2022-06-07 23:00:43 发布

阅读量388

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_43654065/article/details/117256091

版权

128 篇文章 7 订阅

订阅专栏

<script>
      var box = document.getElementById("box1");
      box.style.width = '100px';
</script>

如上代码，通过js设置标签样式，但是一直报错
在这里插入图片描述
这是因为，涉及到dom查询，这个时候dom树还没构建完成，所以查询不到标签。写在head里面的都dom查询js代码要用window.onload包裹一下。

<script> 

	window.onload = function(){
		 var box = document.getElementById("box1");
    	 box.style.width = '100px';
	}
</script>

window.onload()方法用于在网页加载完毕后立刻执行的操作，及当HTML文档加载完毕后，立刻执行某个方法。

为什么要用window.onload()?

因为javascript代码中的函数方法需要在HTML文档渲染完成后才能使用，如果没有渲染完成，此时dom树是不完整的，这样在调用一些javascript代码时就可能报出“undefined”错误

在这里插入图片描述

关注

专栏目录