style屬性的獲取和修改
在DOM當中，如果想設置樣式，有兩種形式：
-
className（針對內嵌樣式）
-
style（針對行內樣式）
這篇文章，我們就來講一下style。
需要注意的是：style是一個對象，只能獲取行內樣式，不能獲取內嵌的樣式和外鏈的樣式。例如：
<!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對象獲取。
通過 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的大小和透明度
1 <body> 2 <div style="width: 100px;height: 100px;background-color: pink;"></div> 3 <script> 4 5 var div = document.getElementsByTagName("div")[0]; 6 div.onmouseover = function () { 7 div.style.width = "200px"; 8 div.style.height = "200px"; 9 div.style.backgroundColor = "black"; 10 div.style.opacity = "0.2"; //設置背景色的透明度。單位是0.1 11 div.style.filter = "alpha(opacity=20)"; //上一行代碼的兼容性寫法。注意單位是百進制 12 } 13 14 </script> 15 16 </body>
舉例2：當前輸入的文本框高亮顯示
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 input { 8 display: block; 9 } 10 </style> 11 12 </head> 13 14 <body> 15 <ul> 16 <input type="text"/> 17 <input type="text"/> 18 <input type="text"/> 19 <input type="text"/> 20 <input type="text"/> 21 </ul> 22 <script> 23 //需求：讓所有的input標簽獲取焦點后高亮顯示 24 25 //1.獲取事件源 26 var inpArr = document.getElementsByTagName("input"); 27 //2.綁定事件 28 //3.書寫事件驅動程序 29 for (var i = 0; i < inpArr.length; i++) { 30 //獲取焦點后，所有的input標簽被綁定onfocus事件 31 inpArr[i].onfocus = function () { 32 this.style.border = "2px solid red"; 33 this.style.backgroundColor = "#ccc"; 34 } 35 //綁定onblur事件，取消樣式 36 inpArr[i].onblur = function () { 37 this.style.border = ""; 38 this.style.backgroundColor = ""; 39 } 40 } 41 </script> 42 </body> 43 </html>
舉例3：高級隔行變色、高亮顯示
<!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>
通過 js 獲取元素當前顯示的樣式
我們在上面的內容中，通過元素.style.className的方式只能獲取行內樣式。但是，有些元素，也寫了內嵌樣式或外鏈樣式。
既然樣式有這么多種，那么，如何獲取元素當前顯示的樣式（包括行內樣式、內嵌樣式、外鏈樣式）呢？我們接下來看一看。
獲取元素當前正在顯示的樣式
（1）w3c的做法：
window.getComputedStyle("要獲取樣式的元素", "偽元素");
兩個參數都是必須要有的。參數二中，如果沒有偽元素就用 null 代替（一般都傳null）。
（2）IE和opera的做法：
obj.currentStyle;
注意：
-
如果當前元素沒有設置該樣式，則獲取它的默認值。
-
該方法會返回一個對象，對象中封裝了當前元素對應的樣式，可以通過
對象.樣式名來讀取具體的某一個樣式。 -
通過currentStyle和getComputedStyle()讀取到的樣式都是只讀的，不能修改，如果要修改必須通過style屬性。
綜合上面兩種寫法，就有了一種兼容性的寫法，同時將其封裝。代碼舉例如下：
<!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>