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>

 

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