为什么这段代码中的JS代码段放在<head>中只有取消设置按钮有作用呢？放在<body>中正常

<!doctupe html>
<html>
<head>
<meta charset="utf-8" />
    <title>Dom练习</title>
    <style type="text/css">
    body{font-size:12px;}
  #txt{
   height:400px;
   width:600px;
   border:#333 solid 1px;
   padding:5px;
  }
  p{
   line-height:18px;
   text-indent:2em;
  }
    </style>
    <script type="text/javascript">
  var mychar=document.getElementById("txt");
    function changeC(){
   mychar.style.color="red";
   mychar.style.backgroundColor="gray";
   }
  function changeW(){
   mychar.style.width="800px";
   mychar.style.height="600px";
   }
  function hiddenC(){
   mychar.style.display="none"
   }
  function displayC(){
   mychar.style.display="block";
   }
  function cancelS(){
   var res=confirm("取消设置？")
   if(res){
      mychar.style.color="#000";
      mychar.style.backgroundColor="#fff";
      mychar.style.width="600px";
      mychar.style.height="400px";
      mychar.style.display="block";
    }
   }
    </script>
</head>

<body>
<h2 id="con">JavaScript课程</h2>
    <div id="txt">
    <h5>JavaScript为网页添加动态效果并实现与用户交互的功能</h5>
        <p>1.JavaScript入门篇，让不懂JS的你快速了解JS</p>
        <p>2.JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
        <p>3.学习以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
    </div>
    
    <form>
        <input type="button" value="改变颜色" onClick="changeC()" />
        <input type="button" value="改变宽高" onClick="changeW()" />
        <input type="button" value="隐藏内容" onClick="hiddenC()" />
        <input type="button" value="显示内容" onClick="displayC()" />
        <input type="button" value="取消设置" onClick="cancelS()" />
    </form>
</body>
</html>

qq_季末先声_03133538

浏览 1551回答 2

2回答

李晓健

因为 var mychar=document.getElementById("txt"); 当执行到这行代码时，页面的body部分还没有生成，也就是说页面还没有<div id="txt"> 这个div，mychar就是undefined,所以代码就会报错。当你把script代码放到 div后面的时候，就会先生成这个div，后执行script代码，这时var mychar=document.getElementById("txt"); 就能够正确获取到这个div，后面的代码就都运行正常。

野猫1

楼上回答正确，浏览器进行解析html文件时，是从上至下的顺序。

随时随地看视频慕课网APP