为了账号安全,请及时绑定邮箱和手机立即绑定

关于<script></script>位置的问题

<!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>位置在前在后,结果可大不一样啊

56ab05e60001bfa005000256.jpg

56ab05e60001e80605000192.jpg

求解答!!



正在回答

3 回答

第一个例子因为有了  onclick="hidetext()  这句代码,会直接在全局寻找并执行hidetext() 这个函数  javascript代码所以在前在后没区别  第二个例子就像你说的一样,javascript代码在前面并未或得到con元素,所以返回值为空,在后面就获得了con的元素,所以有返回值   

3 回复 有任何疑惑可以回复我~
#1

OLYLYL 提问者

非常感谢!
2016-01-29 回复 有任何疑惑可以回复我~

貌似第一章讲过,通过事件调用执行的function对位置没什么要求。

0 回复 有任何疑惑可以回复我~
#1

OLYLYL 提问者

谢谢~
2016-01-29 回复 有任何疑惑可以回复我~

前一个代码执行没有问题是因为当button显示出来时,script标签已经加载完毕,可以执行,后一个的差异是因为当script标签在头部获取id时,body部分未加载出来,浏览器无法获取所以值为null。

0 回复 有任何疑惑可以回复我~
#1

OLYLYL 提问者

谢谢~
2016-01-29 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

关于<script></script>位置的问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信