obj.style.height只能獲取行間樣式,但是我們要怎麼獲取寫在css檔案中的樣式呢?

方法/步驟

1. 首先我們要用一個新的方法currentStyle.這個方法由current和style兩個單片語成意思是:目前的樣式.也就是載入css檔案後取出來的樣式.

   

2. currentStyle的用法是:元素.currentStyle.屬性名

   下面我們開始獲取如圖div1的width樣式,那我們就需要這樣寫:

   var w=document.getElementById('div1').currentStyle.width;

   alert(w);

   在IE下除錯,看是不是可以得到正確的寬度了

   

   

3. IE可以瞭然後我們換個火狐試試,無論我怎麼重新整理都沒有彈出我希望的200px,f12除錯一下,原來如此,火狐不支援currentStyle方法.

   

   

4. 火狐和Chrome支援的是另外一個方法:getComputedStyle,大概意思就是獲取完成的樣式.

   用法:getComputedStyle(元素,false).屬性名

   同2,我們的程式碼應該這樣寫:

   var w=getComputedStyle(document.getElementById('div1'),false).width;

   alert(w);

   現在不報錯了,也能正常的獲取了

   

5. 可是我們用ie試試,肯定沒反應了.因為ie又不支援getComputedStyle了.....是不是很蛋疼

6. 所以現在我們要寫一個函式叫做getClass;

   內容如下:

   //相容獲取非行間樣式

   function getClass(obj,name)

   {

    

   if(obj.currentStyle)

   {

   return obj.currentStyle[name];//IE下獲取非行間樣式

    

   }

   else

   {

   return getComputedStyle(obj,false)[name];//FF、Chorme下獲取費行間樣式

   }

   }

7. 然後我們想要獲取css中的樣式就這樣寫:

   var w=getClass(document.getElementById('div1'),"width");

   alert(w);

   

8. 試試ie,試試火狐.都很ok的啦

   

   

   END

注意事項

• 在js中'[]'的作用和'.'的是一樣的,所以函式裡面寫的是obj.currentStyle[name]。

• 獲取背景顏色的時候不能直接用background,要用background-color

來源：https://jingyan.baidu.com/article/2a138328a90086074a134f80.html