js獲取元素css樣式表中的樣式

情況一：寬高都寫在樣式表裡，即外部樣式或嵌入式樣式，比如#div1。這種情況通過#div1.style.width拿不到寬度，而通過#div1.offsetwidth才可以獲取到寬度。

情況二：寬和高是寫在行內中，即內聯式樣式，比如style="width:120px;"，這中情況通過上述2個方法都能拿到寬度。

因為id.offsetwidth和id.offsetheight無視樣式寫在樣式表還是行內，所以我們獲取元素寬和高的時候最好用這2個屬性。注意如果不是寫在行內style中的屬性都不能通過id.style.atrr來獲取。

**：var $ = document.getelementbyid("view");

var h = $.offsetheight; //高度

var w = $.offsetwidth; //寬度

現在的前端製作很少直接把樣式寫style裡了，都是寫在樣式表裡。如果你要獲取的樣式沒有相對應（即#div1.style.width與#div1.offsetwidth的值不等，因為offset計算時包括padding和border），就只能分別針對不用瀏覽器來獲採樣式表的屬性了，方法如下：

//ie8及以前版本：通過currentstyle

alert(document.getelementbyid('id').currentstyle.width);

//ff,safari,opera,chrome,ie9及之後版本:通過window.getcomputedstyle

var el=document.getelementbyid('id');

alert(window.getcomputedstyle(el,null).width);

附錄：樣式分類

外部樣式 external style sheet

以css為副檔名的檔案（又稱為"超文字樣式表"檔案），它的作用範圍可以是多張網頁，或整個**，甚至不同的**。與網頁鏈結後，才能應用。

嵌入式樣式 internal style sheet （）

包含在網頁內部的樣式設定，它的作用範圍僅限於嵌入的網頁。

內聯式樣式 inline style

在html文件中，內聯式樣式表的格式化資訊直接插入所應用的網頁元素的html標籤中，作為其html標籤的屬性引數。嚴格地說，內聯樣式表稱不上表，僅僅是一條html標記。

當出現相同的樣式時，優先順序是內聯大於嵌入式樣式, 嵌入式樣式大於外部樣式。