有下面这三种简单语句。
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>。这样做的目的是为了让内容-样式-逻辑分离，以便以后能够更好地维护。