有下面這三種簡單語句。
document.getElementsByTagName('body')[0].className = 'snow-container'; //設置為新的
document.getElementsByTagName('body')[0].className += 'snow-container'; //在原來的后面加這個
document.getElementsByTagName('body')[0].classList.add("snow-container"); //與第一個等價
測試一:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.snow-container {
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName('body')[0].className = 'snow-container'; //設置為新的
document.getElementsByTagName('body')[0].className += 'snow-container'; //在原來的后面加這個
document.getElementsByTagName('body')[0].classList.add("snow-container"); //與第一個等價
}
</script>
</head>
<body class="test">
</body>
</html>
測試二:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.snow-container {
background-color: red;
}
</style>
</head>
<body class="test">
</body>
<script type="text/javascript">
document.getElementsByTagName('body')[0].className = 'snow-container'; //設置為新的
document.getElementsByTagName('body')[0].className += 'snow-container'; //在原來的后面加這個
document.getElementsByTagName('body')[0].classList.add("snow-container"); //與第一個等價
</script>
</html>
小結:JS放在body與head中的不同
放在body和head其實差不多的，只不過是文檔解析的時間不同。瀏覽器解析html是從上到下的。
如果把javascript放在head里的話，則先被解析,但這時候body還沒有解析，所以$(#btn)會返回空值。如果把javascript放在head里的話，一般都會綁定一個監聽，當全部的html文檔解析完之后，再執行代碼：
$(document).ready(function(){
//這里放入執行代碼
})
一般情況下最好是單獨把javascript放在js文件里，通過head里的<script src="file.js"></script>鏈接起來，css則是通過<link>。這樣做的目的是為了讓內容-樣式-邏輯分離，以便以后能夠更好地維護。
【當你用心寫完每一篇博客之后,你會發現它比你用代碼實現功能更有成就感!】