style屬性的獲取和修改
在DOM當中，如果想設置樣式，有兩種形式：
-
className（針對內嵌樣式）
-
style（針對行內樣式）
這篇文章，我們就來講一下style。
需要注意的是：style是一個對象，只能獲取行內樣式，不能獲取內嵌的樣式和外鏈的樣式。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>示例</title>
<style>
div {
border: 6px solid rebeccapurple;
}
</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對象獲取。
通過 js 讀取元素的樣式
語法：（方式一）
元素.style.樣式名
備註：我們通過style屬性讀取的樣式都是行內樣式。
語法：（方式二）
元素.style["屬性"]; //格式
box.style["width"]; //舉例
方式二最大的優點是：可以給屬性傳遞參數。
通過 js 修改元素的樣式
語法：
元素.style.樣式名 = 樣式值;
舉例：
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這個屬性，其實就是把行內樣式裏面的值當做字符串來對待。在上方代碼的基礎之上，舉例：
<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>
打印結果：
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的大小和透明度
代碼舉例：
<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：當前輸入的文本框高亮顯示
代碼實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<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：高級隔行變色、高亮顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<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>html</td>
<td>語文</td>
<td>100</td>
</tr>
<tr>
<td>
2
</td>
<td>css</td>
<td>日語</td>
<td>99</td>
</tr>
<tr>
<td>
3
</td>
<td>javascript</td>
<td>營銷學</td>
<td>98</td>
</tr>
<tr>
<td>
4
</td>
<td>river</td>
<td>數學</td>
<td>90</td>
</tr>
<tr>
<td>
5
</td>
<td>react</td>
<td>英語</td>
<td>96</td>
</tr>
<tr>
<td>
6
</td>
<td>vue</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來記錄每一行最原始的顏色（賦值白色之前）。如果不用計數器，可能很多人以爲代碼是寫的：（錯誤的代碼）
<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）w3c的做法：
window.getComputedStyle("要獲取樣式的元素", "僞元素");
兩個參數都是必須要有的。參數二中，如果沒有僞元素就用 null 代替（一般都傳null）。
（2）IE和opera的做法：
obj.currentStyle;
注意：
-
如果當前元素沒有設置該樣式，則獲取它的默認值。
-
該方法會返回一個對象，對象中封裝了當前元素對應的樣式，可以通過
對象.樣式名來讀取具體的某一個樣式。 -
通過currentStyle和getComputedStyle()讀取到的樣式都是隻讀的，不能修改，如果要修改必須通過style屬性。
綜合上面兩種寫法，就有了一種兼容性的寫法，同時將其封裝。代碼舉例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<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"));
//兼容方法獲取元素樣式
function getStyle(ele, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
打印結果：
