一、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>