                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript入門篇

javasript改變HTML樣式放在head標簽實現不了的問題

應該是跟文檔是從由上到下讀取的問題那么為什么放在head標簽的時候樣式不能實現而隱藏顯示按鈕卻可以實現呢

瘋子亞當

2016-05-08

源自：JavaScript入門篇 3-5

關注問題我要回答

1127

操作

收起

1 回答

Alrene_ 回答被采納 +3 積分
2016-05-08

1、主要是先加載和后加載的區別。

如果JavaScript腳本寫在head標簽里面，那么需要用window.onload起到一個延遲加載的作用。

2、實例：你要寫在head里實現可以這樣寫。舉個例子：

a:不能實現

<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>style樣式</title>
?<script?type="text/javascript">
????var?mychar=?document.getElementById("con");
????mychar.style.color="red";
????mychar.style.backgroundColor="blue";
????mychar.style.width="150px";
??</script>
</head>
<body>
??<h2?id="con">I?love?JavaScript</H2>
??<p>?JavaScript使網頁顯示動態效果并實現與用戶交互功能。</p>
</body>
</html>

b：實現了

<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>style樣式</title>
?<script?type="text/javascript">
?function?a(){
????var?mychar=?document.getElementById("con");
????mychar.style.color="red";
????mychar.style.backgroundColor="blue";
????mychar.style.width="150px";
}
??</script>
</head>
<body?onload=a()>
??<h2?id="con">I?love?JavaScript</H2>
??<p>?JavaScript使網頁顯示動態效果并實現與用戶交互功能。</p>
</body>
</html>