这种函数是用到的时候调用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>换肤</title> <link rel="stylesheet" type="text/css" href="1.css" id="link"> <script type="text/javascript"> function skin01() { var oLink = document.getElementById('link'); oLink.href = '1.css'; } function skin02() { var oLink = document.getElementById('link'); oLink.href = '2.css'; } </script> </head> <body> <input type="button" name="" value="皮肤01" onclick="skin01()"> <input type="button" name="" value="皮肤02" onclick="skin02()"> <div class="box1" id="div1"></div> </body> </html>
而这种函数是：当整个文档加载完成之后，再执行{}中的内容，没有调用
window.onload = function () {
var oA = document.getElementById('link1');
为了更好的解耦，通常可以提取行间事件，这样input标签中的函数调用就被写到js文件中了：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>换肤</title> <link rel="stylesheet" type="text/css" href="1.css" id="link"> <script type="text/javascript"> <!--提取行间事件--> window.onload = function () { var oBtn01 = document.getElementById('btn01'); var oBtn02 = document.getElementById('btn02'); //注意这里不能有括号，skin01（）的话就立刻执行了哦，所以不要加（）！ oBtn01.onclick = skin01; oBtn02.onclick = skin02; } function skin01() { var oLink = document.getElementById('link'); oLink.href = '1.css'; } function skin02() { var oLink = document.getElementById('link'); oLink.href = '2.css'; } </script> </head> <body> <input type="button" name="" value="皮肤01" id="btn01"> <input type="button" name="" value="皮肤02" id="btn02"> <div class="box1" id="div1"></div> </body> </html>