DOM-设置样式心得

一、style属性的设置和获取

style是一个对象,不能通过内嵌或外链获取,也就是只有是行内式的时候才能打印显示

style本身是一个对象
属性的值是字符串,没有赋值的情况下是""(空串),不是null或undefined
命名规则是驼峰命名,和CSS不同
设置过的类样式不能获取(只和行内式交互,与内嵌、外链式无关)
类名.style.cssText获取到的是字符串形式的CSS样式

***仅用于行内元素少的时候***

 1  <script>
 2         window.onload = function () {
 3             //需求:除表头外,鼠标放在每一行上,背景色高亮显示
 4             //获取事件源及相关变量
 5             var tb = document.getElementById('target');
 6             var trArr = tb.getElementsByTagName('tr');
 7             //设置基本颜色
 8             for (var i = 0;i < trArr.length; i++) {
 9                 if (i % 2 != 0) {
10                     trArr[i].style.backgroundColor = "#c3c3c3";
11                 }else {
12                     trArr[i].style.backgroundColor = "#ccc";
13                 }
14             }
15             //绑定事件,遍历,让每一行都绑定事件
16             for (var i = 0;i < trArr.length; i++) {
17                 //定义一个变量,记录当前颜色
18                 var color = "";
19                 trArr[i].onmouseover = function () {
20                     //书写事件驱动程序,改变鼠标所在行的背景颜色
21                         color = this.style.backgroundColor;
22                         this.style.backgroundColor = "#fff";
23                 }
24                 trArr[i].onmouseout = function () {
25                         this.style.backgroundColor = color;
26                 }
27             }
28         }
29 
30 
31     </script>
32 </head>
33 <body>
34     <div class="wrap">
35         <table>
36             <thead>
37                 <tr>
38                     <th>序号</th>
39                     <th>姓名</th>
40                     <th>成绩</th>
41                 </tr>
42             </thead>
43             <tbody id="target">
44                 <tr>
45                     <td>1</td>
46                     <td>张三</td>
47                     <td>60</td>
48                 </tr>
49                 <tr>
50                     <td>2</td>
51                     <td>李四</td>
52                     <td>70</td>
53                 </tr>
54                 <tr>
55                     <td>3</td>
56                     <td>王五</td>
57                     <td>80</td>
58                 </tr>
59                 <tr>
60                     <td>4</td>
61                     <td>赵六</td>
62                     <td>90</td>
63                 </tr>
64                 <tr>
65                     <td>5</td>
66                     <td>吴七</td>
67                     <td>100</td>
68                 </tr>
69             </tbody>
70         </table>
71     </div>
72 </body>