请教一个javascript问题

AlanProgrammer 2014-04-06 12:32:30



<html>

<head>



</head>



<body>



<p id="test">Hello World</p>



<script>



document.getElementById("test").style.color="blue";



</script>



</body>

</html>

请问在这段代码中为什么<script>部分放在<p>部分后面字才会变成蓝色为什么<script>放在<p>部分前面字颜色不变

...全文

460 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

AlanProgrammer 2014-04-06

打赏
举报

引用 1 楼 zyl_lyr1019 的回复:

这样的代码是顺序加载的，如果你把script放在前面，那么你执行获取id的操作时，对应的HTML元素还不存在，所以是找不到document.getElementById("test")这个对象的。。所以这个时候，你可以使用onload进行处理。
window.onload = function(){
    document.getElementById("test").style.color="blue";
}
这样会在整个页面的元素，结构都加载完成之后，再执行这块的js代码。

谢谢那<script>部分放在head里面为什么也不可以呢

张运领 2014-04-06

打赏
举报

这样的代码是顺序加载的，如果你把script放在前面，那么你执行获取id的操作时，对应的HTML元素还不存在，所以是找不到document.getElementById("test")这个对象的。。所以这个时候，你可以使用onload进行处理。

window.onload = function(){
    document.getElementById("test").style.color="blue";
}

这样会在整个页面的元素，结构都加载完成之后，再执行这块的js代码。

AlanProgrammer 2014-04-06

打赏
举报

引用 10 楼 showbo 的回复:

script是按照先后出现的循序执行，你的script只能引用script之前输出的html对象，你放到p在script后p都没有生成，当然引用不到，1#已经说过了

script部分放在head里面 p部分放在body里面 script是在head之前的这样也不可以必须要用window.onload是吗

Go 旅城通票 2014-04-06

打赏
举报

script是按照先后出现的循序执行，你的script只能引用script之前输出的html对象，你放到p在script后p都没有生成，当然引用不到，1#已经说过了

AlanProgrammer 2014-04-06

打赏
举报

我懂了就是放在<head>里面也要用window.onload方法来加载

AlanProgrammer 2014-04-06

打赏
举报

引用 7 楼 showbo 的回复:

<html> <head> <script> window.onload=function(){ document.getElementById("test").style.color="blue"; } </script> </head> <body> <p id="test">Hello World</p> <script> </script> </body> </html>

谢谢版主您的意思我懂我的意思是那<script>部分放在<head>里面为什么也不可以呢 <head>里面的信息也是页面一打开就加载的是吗

Go 旅城通票 2014-04-06

打赏
举报

<html> <head> <script> window.onload=function(){ document.getElementById("test").style.color="blue"; } </script> </head> <body> <p id="test">Hello World</p> <script> </script> </body> </html>

AlanProgrammer 2014-04-06