首頁(yè) 猿問(wèn) 為什么這段代碼中的JS代碼段放在&...

為什么這段代碼中的JS代碼段放在<head>中只有取消設(shè)置按鈕有作用呢？放在<body>中正常

JavaScript

qq_季末先聲_03133538 2016-04-11 14:11:30

?<!doctupe html><html><head>?<meta charset="utf-8" />??? <title>Dom練習(xí)</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("取消設(shè)置？")???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為網(wǎng)頁(yè)添加動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互的功能</h5>??????? <p>1.JavaScript入門篇，讓不懂JS的你快速了解JS</p>??????? <p>2.JavaScript進(jìn)階篇，讓你掌握J(rèn)S的基礎(chǔ)語(yǔ)法、函數(shù)、數(shù)組、事件、內(nèi)置對(duì)象、BOM瀏覽器、DOM操作。</p>??????? <p>3.學(xué)習(xí)以上兩門基礎(chǔ)課后，在深入學(xué)習(xí)JavaScript的變量作用域、事件、對(duì)象、運(yùn)動(dòng)、cookie、正則表達(dá)式、ajax等課程。</p>??? </div>??? ??? <form>??????? <input type="button" value="改變顏色" onClick="changeC()" />??????? <input type="button" value="改變寬高" onClick="changeW()" />??????? <input type="button" value="隱藏內(nèi)容" onClick="hiddenC()" />??????? <input type="button" value="顯示內(nèi)容" onClick="displayC()" />??????? <input type="button" value="取消設(shè)置" onClick="cancelS()" />??? </form></body></html>

查看完整描述

2 回答

已采納

李曉健

TA貢獻(xiàn)1036條經(jīng)驗(yàn) 獲得超461個(gè)贊

因?yàn)?var mychar=document.getElementById("txt"); ? 當(dāng)執(zhí)行到這行代碼時(shí)，頁(yè)面的body部分還沒(méi)有生成，也就是說(shuō)頁(yè)面還沒(méi)有<div id="txt"> ?這個(gè)div，mychar就是undefined,所以代碼就會(huì)報(bào)錯(cuò)。

當(dāng)你把script代碼放到 div后面的時(shí)候，就會(huì)先生成這個(gè)div，后執(zhí)行script代碼，這時(shí)var mychar=document.getElementById("txt"); ? 就能夠正確獲取到這個(gè)div，后面的代碼就都運(yùn)行正常。

反對(duì) 回復(fù) 2016-04-11