style属性的获取和修改
在DOM当中，如果想设置样式，有两种形式：
className（针对内嵌样式）
style（针对行内样式）
这篇文章，我们就来讲一下style。
需要注意的是：style是一个对象，只能获取行内样式，不能获取内嵌的样式和外链的样式。例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 6px solid red;
}
</style>
</head>
<body>
<div class="box1" style="width: 200px;height: 100px;background-color: pink;"></div>
<script>
var box1 = document.getElementsByTagName("div")[0];
console.log(box1.style.backgroundColor);
console.log(box1.style.border);
console.log(typeof box1.style);
console.log(box1.style);
</script>
</body>
</html>
|
打印结果：
上图显示，因为border属性不是行内样式，所以无法通过style对象获取。
通过 js 读取元素的样式
语法：（方式一）
备注：我们通过style属性读取的样式都是行内样式。
语法：（方式二）
1
2
3
| 元素.style["属性"];
box.style["width"];
|
方式二最大的优点是：可以给属性传递参数。
通过 js 设置元素的样式
语法：
举例：
1
2
| box1.style.width = "300px"
box1.style.backgroundColor = "red"
|
备注：我们通过style属性设置的样式都是行内样式，而行内样式有较高的优先级。但是如果在样式中的其他地方写了!important，则此时!important会有更高的优先级。
style属性的注意事项
style属性需要注意以下几点：
（1）样式少的时候使用。
（2）style是对象。我们在上方已经打印出来，typeof的结果是Object。
（3）值是字符串，没有设置值是“”。
（4）命名规则，驼峰命名。
（5）只能获取行内样式，和内嵌和外链无关。
（6）box.style.cssText = “字符串形式的样式”。
cssText这个属性，其实就是把行内样式里面的值当做字符串来对待。在上方代码的基础之上，举例：
1
2
3
4
5
6
7
8
9
| <script>
var box1 = document.getElementsByTagName("div")[0];
box1.style.cssText = "width: 300px;height: 300px;background-color: green;";
console.log(box1.style.cssText);
</script>
|
打印结果：
style的常用属性
style的常用属性包括：
注意DOM对象style的属性和标签中style内的值不一样，因为在JS中，-不能作为标识符。比如：
DOM中：backgroundColor
CSS中：background-color
style属性的举例
我们针对上面列举的几个style的样式，来举几个例子：
举例1、改变div的大小和透明度
举例2、当前输入的文本框高亮显示
举例3、高级隔行变色、高亮显示
下面来逐一实现。
举例1：改变div的大小和透明度
代码举例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <body>
<div style="width: 100px;height: 100px;background-color: pink;"></div>
<script>
var div = document.getElementsByTagName("div")[0];
div.onmouseover = function () {
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "black";
div.style.opacity = "0.2";
div.style.filter = "alpha(opacity=20)";
}
</script>
</body>
|
举例2：当前输入的文本框高亮显示
代码实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input {
display: block;
}
</style>
</head>
<body>
<ul>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</ul>
<script>
var inpArr = document.getElementsByTagName("input");
for (var i = 0; i < inpArr.length; i++) {
inpArr[i].onfocus = function () {
this.style.border = "2px solid red";
this.style.backgroundColor = "#ccc";
}
inpArr[i].onblur = function () {
this.style.border = "";
this.style.backgroundColor = "";
}
}
</script>
</body>
</html>
|
举例3：高级隔行变色、高亮显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
| <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
text-align: center;
}
.wrap {
width: 500px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
cursor: pointer;
}
.current {
background-color: red !important;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>课程</th>
<th>成绩</th>
</tr>
</thead>
<tbody id="target">
<tr>
<td>
1
</td>
<td>生命壹号</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>
2
</td>
<td>生命贰号</td>
<td>日语</td>
<td>99</td>
</tr>
<tr>
<td>
3
</td>
<td>生命叁号</td>
<td>营销学</td>
<td>98</td>
</tr>
<tr>
<td>
4
</td>
<td>生命伍号</td>
<td>数学</td>
<td>90</td>
</tr>
<tr>
<td>
5
</td>
<td>许嵩</td>
<td>英语</td>
<td>96</td>
</tr>
<tr>
<td>
6
</td>
<td>vae</td>
<td>体育</td>
<td>90</td>
</tr>
</tbody>
</table>
</div>
<script>
var tbody = document.getElementById("target");
var trArr = tbody.children;
for (var i = 0; i < trArr.length; i++) {
if (i % 2 !== 0) {
trArr[i].style.backgroundColor = "#a3a3a3";
} else {
trArr[i].style.backgroundColor = "#ccc";
}
var myColor = "";
trArr[i].onmouseover = function () {
myColor = this.style.backgroundColor;
this.style.backgroundColor = "#fff";
}
trArr[i].onmouseout = function () {
this.style.backgroundColor = myColor;
}
}
</script>
</body>
</html>
|
实现的效果如下：
代码解释：
上方代码中，我们用到了计数器myColor来记录每一行最原始的颜色（赋值白色之前）。如果不用计数器，可能很多人以为代码是写的：（错误的代码）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <script>
var tbody = document.getElementById("target");
var trArr = tbody.children;
for (var i = 0; i < trArr.length; i++) {
if (i % 2 !== 0) {
trArr[i].style.backgroundColor = "#a3a3a3";
} else {
trArr[i].style.backgroundColor = "#ccc";
}
trArr[i].onmouseover = function () {
this.style.backgroundColor = "#fff";
}
trArr[i].onmouseout = function () {
this.style.backgroundColor = "#a3a3a3";
}
}
</script>
|
这种错误的代码，实现的效果却是：（未达到效果）
通过 js 获取元素当前显示的样式
我们在上面的内容中，通过元素.style.className的方式只能获取行内样式。但是，有些元素，也写了内嵌样式或外链样式。
既然样式有这么种，那么，如何获取元素当前显示的样式（包括行内样式、内嵌样式、外链样式）呢？我们接下来看一看。
获取元素当前正在显示的样式
（1）w3c的做法：
1
| window.getComputedStyle("要获取样式的元素", "伪元素");
|
两个参数都是必须要有的。参数二中，如果没有伪元素就用 null 代替（一般都传null）。
（2）IE和opera的做法：
注意：
综合上面两种写法，就有了一种兼容性的写法，同时将其封装。代码举例如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
background-color: pink;
padding: 10px;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;"></div>
<script>
var div1 = document.getElementsByTagName("div")[0];
console.log(getStyle(div1, "width"));
console.log(getStyle(div1, "padding"));
console.log(getStyle(div1, "background-color"));
/*
* 兼容方法，获取元素当前正在显示的样式。
* 参数：
* obj 要获取样式的元素
*. name 要获取的样式名
*/
function getStyle(ele, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
|
打印结果：
我的公众号
想学习更多技能？不妨关注我的微信公众号：千古壹号（id：qianguyihao）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
