正文

DOM-设置样式心得

IP云
IP云V管理员/2 阅读
10/04
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

一、style属性的设置和获取

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

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

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

<script>
window.onload = function () {
//需求:除表头外,鼠标放在每一行上,背景色高亮显示
//获取事件源及相关变量
var tb = document.getElementById('target');
var trArr = tb.getElementsByTagName('tr');
//设置基本颜色
for (var i = 0;i < trArr.length; i++) {
if (i % 2 != 0) {
trArr[i].style.backgroundColor = "#c3c3c3";
}else {
trArr[i].style.backgroundColor = "#ccc";
}
}
//绑定事件,遍历,让每一行都绑定事件
for (var i = 0;i < trArr.length; i++) {
//定义一个变量,记录当前颜色
var color = "";
trArr[i].onmouseover = function () {
//书写事件驱动程序,改变鼠标所在行的背景颜色
color = this.style.backgroundColor;
this.style.backgroundColor = "#fff";
}
trArr[i].onmouseout = function () {
this.style.backgroundColor = color;
}
}
} </script>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody id="target">
<tr>
<td>1</td>
<td>张三</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>70</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>80</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>90</td>
</tr>
<tr>
<td>5</td>
<td>吴七</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
</body>