一、style屬性的獲取和修改
在DOM當中，如果想設置樣式，有兩種形式：
- className（針對內嵌樣式）
- style（針對行內樣式）
這里我們就來講一下style。
需要注意的是：style是一個對象，只能獲取**行內樣式**，不能獲取內嵌的樣式和外鏈的樣式。例如：
```html
<!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); //因為是對象，所以打印結果是Object
console.log(box1.style); //打印結果是對象
</script>
</body>
</html>
```
打印結果：
上圖顯示，因為border屬性不是行內樣式，所以無法通過style對象獲取。
1、通過 js 讀取元素的樣式
語法：（方式一）
```javascript
元素.style.樣式名
```
備注：我們通過style屬性讀取的樣式都是**行內樣式**。
語法：（方式二）
```javascript
元素.style["屬性"]; //格式
box.style["width"]; //舉例
```
方式二最大的優點是：可以給屬性傳遞參數。
2、通過 js 設置元素的樣式
語法：
```javascript
元素.style.樣式名 = 樣式值;
```
舉例：
```
box1.style.width = "300px";
box1.style.backgroundColor = "red"; // 駝峰命名法
```
備注：我們通過style屬性設置的樣式都是**行內樣式**，而行內樣式有較高的優先級。但是如果在樣式中的其他地方寫了`!important`，則此時`!important`會有更高的優先級。
3、style屬性的注意事項
style屬性需要注意以下幾點：
（1）樣式少的時候使用。
（2）style是對象。我們在上方已經打印出來，typeof的結果是Object。
（3）值是字符串，沒有設置值是“”。
（4）命名規則，駝峰命名。
（5）只能獲取行內樣式，和內嵌和外鏈無關。
（6）box.style.cssText = “字符串形式的樣式”。
`cssText`這個屬性，其實就是把行內樣式里面的值當做字符串來對待。在上方代碼的基礎之上，舉例：
```html
<script>
var box1 = document.getElementsByTagName("div")[0];
//通過cssText一次性設置行內樣式
box1.style.cssText = "width: 300px;height: 300px;background-color: green;";
console.log(box1.style.cssText); //這一行更加可以理解,style是對象
</script>
```
打印結果：
4、style的常用屬性
style的常用屬性包括：
- backgroundColor
- backgroundImage
- color
- width
- height
- border
- opacity 設置透明度 (IE8以前是filter: alpha(opacity=xx))
注意DOM對象style的屬性和標簽中style內的值不一樣，因為在JS中，`-`不能作為標識符。比如：
- DOM中：backgroundColor
- CSS中：background-color
二、style屬性的舉例
我們針對上面列舉的幾個style的樣式，來舉幾個例子：
- 舉例1、改變div的大小和透明度
- 舉例2、當前輸入的文本框高亮顯示
- 舉例3、高級隔行變色、高亮顯示
下面來逐一實現。
### 舉例1：改變div的大小和透明度
代碼舉例：
```html
<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"; //設置背景色的透明度。單位是0.1
div.style.filter = "alpha(opacity=20)"; //上一行代碼的兼容性寫法。注意單位是百進制
}
</script>
</body>
```
### 舉例2：當前輸入的文本框高亮顯示
代碼實現：
```html
<!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>
//需求：讓所有的input標簽獲取焦點后高亮顯示
//1.獲取事件源
var inpArr = document.getElementsByTagName("input");
//2.綁定事件
//3.書寫事件驅動程序
for (var i = 0; i < inpArr.length; i++) {
//獲取焦點后，所有的input標簽被綁定onfocus事件
inpArr[i].onfocus = function () {
this.style.border = "2px solid red";
this.style.backgroundColor = "#ccc";
}
//綁定onblur事件，取消樣式
inpArr[i].onblur = function () {
this.style.border = "";
this.style.backgroundColor = "";
}
}
</script>
</body>
</html>
```
### 舉例3：高級隔行變色、高亮顯示
```html
<!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>
//需求：讓tr各行變色，鼠標放入tr中，高亮顯示。
//1.隔行變色。
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";
}
//鼠標進入高亮顯示
//難點：鼠標移開的時候要回復原始顏色。
//計數器（進入tr之后，立刻記錄顏色，然后移開的時候使用記錄好的顏色）
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來記錄每一行最原始的顏色**（賦值白色之前）。如果不用計數器，可能很多人以為代碼是寫的：（錯誤的代碼）
```html
<script>
//需求：讓tr各行變色，鼠標放入tr中，高亮顯示。
//1.隔行變色。
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";
}
//鼠標進入高亮顯示
//難點：鼠標移開的時候要回復原始顏色。
//計數器（進入tr之后，立刻記錄顏色，然后移開的時候使用記錄好的顏色）
trArr[i].onmouseover = function () {
this.style.backgroundColor = "#fff";
}
trArr[i].onmouseout = function () {
this.style.backgroundColor = "#a3a3a3";
}
}
</script>
```
這種錯誤的代碼，實現的效果卻是：（未達到效果）
三、通過 js 獲取元素當前顯示的樣式
我們在上面的內容中，通過`元素.style.className`的方式只能獲取**行內樣式**。但是，有些元素，也寫了**內嵌樣式或外鏈樣式**。
既然樣式有這么種，那么，如何獲取元素當前顯示的樣式（包括行內樣式、內嵌樣式、外鏈樣式）呢？我們接下來看一看。
1、獲取元素當前正在顯示的樣式
（1）w3c的做法：
```javascript
window.getComputedStyle("要獲取樣式的元素", "偽元素");
```
兩個參數都是必須要有的。參數二中，如果沒有偽元素就用 null 代替（一般都傳null）。
（2）IE和opera的做法：
```javascript
obj.currentStyle;
```
注意：
- 如果當前元素沒有設置該樣式，則獲取它的默認值。
- 該方法會返回一個**對象**，對象中封裝了當前元素對應的樣式，可以通過`對象.樣式名`來讀取具體的某一個樣式。
- 通過currentStyle和getComputedStyle()讀取到的樣式都是只讀的，不能修改，如果要修改必須通過style屬性。
綜合上面兩種寫法，就有了一種兼容性的寫法，同時將其封裝。代碼舉例如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
background-color: pink;
/*border: 1px solid #000;*/
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>
```
打印結果：
