style操作无论是读还是写，都是在行间body进行操作，而不是样式表style
样式优先级：
行间>id>class>标签>通配符*
对于以个同一个元素，要么只动class，要么只动style，不要出现混乱。
提取行间事件
window.onload加载完整个页面之后再来执行其中的代码
行为样式结构三者分录
别加行间样式，别加行间js事件
给元素添加事件
onclick是按钮的一个属性，他一定要接受一个函数
window.onload的作用看代码试一下：
html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 window.onload = function(){ 8 var q = document.getElementById('btn1'); 9 q.onclick = function () { 10 alert('a'); 11 }; 12 }; 13 </script> 14 </head> 15 16 <body> 17 </body> 18 <input id="btn1" type="button" value="按钮" /> 19 </html>
输出四个红色方框。
html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 div { 9 width: 200px; 10 height: 200px; 11 float: left; 12 border: 1px solid black; 13 margin: 10px; 14 } 15 </style> 16 17 <script> 18 window.onload = function () { 19 var q = document.getElementsByTagName('div'); 20 //alert(q.length); 输出4 21 for (var i = 0; i < q.length; i++) 22 q[i].style.background = 'red'; 23 } 24 </script> 25 26 </head> 27 28 <body> 29 <div></div> 30 <div></div> 31 <div></div> 32 <div></div> 33 </body> 34 35 </html>