有下面這三種簡單語句。
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>。這樣做的目的是為了讓內容-樣式-邏輯分離，以便以后能夠更好地維護。