JavaScript獲取非行間樣式/定義樣式

html節點的樣式分爲如下幾種
(1)瀏覽器默認樣式
(2)引用樣式(引用外部css文件的樣式、style標籤內定義的樣式)
    引用外部css樣式:<link rel="stylesheet" href="css/style.css" type="text/css">
    style標籤內:<style> width:100px; </style>
(3)行間樣式(節點style屬性定義的樣式)好比:<div style="width:100px;"></div>

有些童鞋會問：爲何要獲取「非行間樣式」？

有時候在用JS動態設置一個元素的樣式的時候要同時考慮style="display:none"和樣式表裏面的elem {display:none}這兩種狀況。舉個簡單的例子說明：若是單擊一個按鈕讓一個div元素顯示或隱藏（單擊按鈕時若是div默認是隱藏的就顯示，反之隱藏）。首先要獲取div元素默認的顯示狀態，若是這時只獲取行間樣式而樣式表裏設置了DIV元素的display的話獲取的樣式就不那麼準確。因此除了行間樣式外樣式表內的非行間樣式也要同時獲取才行。

下面就是獲取非行間樣式的示例：

HTML代碼：

<style>
    *{ text-align:center;}
    input{ margin-top:30px; padding:10px 20px;}
    #div1{ width:500px; height:300px; background:red; margin:10px   auto;}
</style>

<input type="button" value="style" id="btn" />
<div id="div1"></div>

 

 javascript代碼以下：

 1  <script>
 2 //獲取非行間css樣式
 3 function getStyle(obj,attr){    //獲取非行間樣式，obj是對象，attr是值
 4     if(obj.currentStyle){   //針對ie獲取非行間樣式
 5         return obj.currentStyle[attr];
 6     }else{
 7         return getComputedStyle(obj,false)[attr];   //針對非ie
 8     };
 9 };
10 //爲對象寫入/獲取css樣式
11 function css(obj,attr,value){   //對象，樣式，值。傳2個參數的時候爲獲取樣式，3個是設置樣式
12     if(arguments.length == 2){  //arguments參數數組，當參數數組長度爲2時表示獲取css樣式
13         return getStyle(obj,attr);  //返回對象的非行間樣式用上面的getStyle函數
14     }else{
15         if(arguments.length == 3){  //當傳三個參數的時候爲設置對象的某個值
16             obj.style[attr] = value;
17         };
18     };
19 };
20 window.onload = function(){
21     var oDiv = document.getElementById("div1");
22     var oBtn = document.getElementById("btn");
23     oBtn.onclick = function(){
24         alert(getStyle(oDiv,"height"));
25         css(oDiv,"background","green");
26         alert(css(oDiv,"width"));
27     };
28 };
29 </script>