element.style.backgroundColor = '#000';

然而，很多時候我們在修改元素的樣式之前要先保留元素原來的樣式屬性值，或許可以這麼做：

 var bc = element.style.backgroundColor;

這麼做有可能獲取到element元素的background-color屬性值，但是，在多數情況下獲取到的確實 'undefined'，何解？？

原因很簡單，就是element.style只能獲取到element的內聯樣式，而在一個設計良好的網頁檔案裡，樣式表一般是與文件結構分離開來以外部檔案存在的。所以，僅僅用element.style不能如意地獲取元素CSS樣式！

那麼，有什麼方法可以獲取外部樣式嗎？答案是：有的，不過存在 IE 與 W3C 的相容問題！

在 IE 中，element 除了有 style 屬性之外，還有一個 currentStyle 屬性。currentStyle 的用法和 style 的用法一樣，然而不同的是，currentStyle 如名字所示獲取到的是 element 元素當前(所有的)樣式：

 var cbc = element.currentStyle.backgroundColor;//一定是元素當前的樣式

 var bc = element.style.backgroundColor;//多數情況下為undefined，囧...

好了，在 IE 下我們已經解決了獲取外部樣式的問題。然而，在 Firefox 等支援W3C DOM標準的瀏覽器卻不支援currentStyle屬性，所以只能另尋他方了。不用急，DOM也提供獲取元素當前樣式的，只不過稍稍麻煩一點點^_^

DOM提供了一個 getComputedStyle() 方法獲取給定元素的樣式表。這個函式有兩個引數：第一個引數為需要獲取樣式的元素物件；第二個引數為偽元素，如:hover, :first-letter, :before等等，如果不需要偽元素則該引數為null。getComputedStyle()函式可以從 document.defaultView 物件中訪問到，即可以這樣呼叫該函式：

 var cbc = document.defaultView.getComputedStyle(element,null).backgroundColor;

以上語句的作用就是獲取 element 元素當前的 background-color 屬性值。

getComputeStyle()函式的呼叫結果就是 element 元素的樣式表，理應是一個物件。該物件還有一個方法：getPropertyValue()。該方法只有一個引數，即需要獲取的樣式的屬性名，屬性名與樣式表中的形式相同，即背景色的屬性名為 background-color，而非 backgroundColor。

好吧，以下開始定義getStyle()函式，或許分析完以下的程式碼段之後，可以對以上的解說更形象的理解。和以前一樣，凡在標題開頭帶有'[JS庫]'字樣的文章都是為了充實我個人的 JS 庫：pan，所以如果無法理解以下程式碼的編寫形式，請先參閱之前的'[JS庫]'相關博文：

(function(){

    if(!window.pan){
        window['pan']={};
    }

    //pan庫中其它函式的定義，略

    //
    function getStyle(elem,styleName){
        if(elem.style[styleName]){//內聯樣式
            return elem.style[styleName];
        }
        else if(elem.currentStyle){//IE
            return elem.currentStyle[styleName];
        }
        else if(document.defaultView && document.defaultView.getComputedStyle){//DOM
            styleName = styleName.replace(/([A-Z])/g,'-$1').toLowerCase();
            var s = document.defaultView.getComputedStyle(elem,'');
            return s&&s.getPropertyValue(styleName);
        }
        else{//other,for example, Safari
            return null;
        }
    }
    window['pan']['getStyle'] = getStyle;

})();

需要說明的一點是，Safari不支援document.defaultView，所以以上函式獲取元素外部樣式不支援Safari瀏覽器。

這個函式的用法非常簡單，傳遞兩個引數：第一個引數為需要獲取樣式的元素物件；第二個引數為樣式的屬性名，屬性名規則與style一致，即多個單詞的屬性名除了第一個單詞外其它的均需首字母大寫：

 var cbc = pan.getStyle(element, 'backgroundColor');//獲取背景色

 var w = pan.getStyle(element, 'width');//獲取寬度

 var blw = pan.getStyle(element, 'borderLeftWidth');//獲取左邊框的寬度

好了，這個函式就寫到這裡，相信我已經將該函式的內部邏輯結構和用法都說明清楚了，呵呵，我的JS庫又新添了一個函數了^_^

PS：該函式有待改進，如第一個引數可以不侷限於傳遞元素物件。

_ ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

 element.style.backgroundColor = '#000';

然而，很多時候我們在修改元素的樣式之前要先保留元素原來的樣式屬性值，或許可以這麼做：

 var bc = element.style.backgroundColor;

這麼做有可能獲取到element元素的background-color屬性值，但是，在多數情況下獲取到的確實 'undefined'，何解？？

原因很簡單，就是element.style只能獲取到element的內聯樣式，而在一個設計良好的網頁檔案裡，樣式表一般是與文件結構分離開來以外部檔案存在的。所以，僅僅用element.style不能如意地獲取元素CSS樣式！

那麼，有什麼方法可以獲取外部樣式嗎？答案是：有的，不過存在 IE 與 W3C 的相容問題！

在 IE 中，element 除了有 style 屬性之外，還有一個 currentStyle 屬性。currentStyle 的用法和 style 的用法一樣，然而不同的是，currentStyle 如名字所示獲取到的是 element 元素當前(所有的)樣式：

 var cbc = element.currentStyle.backgroundColor;//一定是元素當前的樣式

 var bc = element.style.backgroundColor;//多數情況下為undefined，囧...

好了，在 IE 下我們已經解決了獲取外部樣式的問題。然而，在 Firefox 等支援W3C DOM標準的瀏覽器卻不支援currentStyle屬性，所以只能另尋他方了。不用急，DOM也提供獲取元素當前樣式的，只不過稍稍麻煩一點點^_^

DOM提供了一個 getComputedStyle() 方法獲取給定元素的樣式表。這個函式有兩個引數：第一個引數為需要獲取樣式的元素物件；第二個引數為偽元素，如:hover, :first-letter, :before等等，如果不需要偽元素則該引數為null。getComputedStyle()函式可以從 document.defaultView 物件中訪問到，即可以這樣呼叫該函式：

 var cbc = document.defaultView.getComputedStyle(element,null).backgroundColor;

以上語句的作用就是獲取 element 元素當前的 background-color 屬性值。

getComputeStyle()函式的呼叫結果就是 element 元素的樣式表，理應是一個物件。該物件還有一個方法：getPropertyValue()。該方法只有一個引數，即需要獲取的樣式的屬性名，屬性名與樣式表中的形式相同，即背景色的屬性名為 background-color，而非 backgroundColor。

好吧，以下開始定義getStyle()函式，或許分析完以下的程式碼段之後，可以對以上的解說更形象的理解。和以前一樣，凡在標題開頭帶有'[JS庫]'字樣的文章都是為了充實我個人的 JS 庫：pan，所以如果無法理解以下程式碼的編寫形式，請先參閱之前的'[JS庫]'相關博文：

(function(){

    if(!window.pan){
        window['pan']={};
    }

    //pan庫中其它函式的定義，略

    //
    function getStyle(elem,styleName){
        if(elem.style[styleName]){//內聯樣式
            return elem.style[styleName];
        }
        else if(elem.currentStyle){//IE
            return elem.currentStyle[styleName];
        }
        else if(document.defaultView && document.defaultView.getComputedStyle){//DOM
            styleName = styleName.replace(/([A-Z])/g,'-$1').toLowerCase();
            var s = document.defaultView.getComputedStyle(elem,'');
            return s&&s.getPropertyValue(styleName);
        }
        else{//other,for example, Safari
            return null;
        }
    }
    window['pan']['getStyle'] = getStyle;

})();

需要說明的一點是，Safari不支援document.defaultView，所以以上函式獲取元素外部樣式不支援Safari瀏覽器。

這個函式的用法非常簡單，傳遞兩個引數：第一個引數為需要獲取樣式的元素物件；第二個引數為樣式的屬性名，屬性名規則與style一致，即多個單詞的屬性名除了第一個單詞外其它的均需首字母大寫：

 var cbc = pan.getStyle(element, 'backgroundColor');//獲取背景色

 var w = pan.getStyle(element, 'width');//獲取寬度

 var blw = pan.getStyle(element, 'borderLeftWidth');//獲取左邊框的寬度

好了，這個函式就寫到這裡，相信我已經將該函式的內部邏輯結構和用法都說明清楚了，呵呵，我的JS庫又新添了一個函數了^_^

PS：該函式有待改進，如第一個引數可以不侷限於傳遞元素物件。

//獲取最終樣式
function getStyle(obj, attr)
{
return parseFloat(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr])
}

 element.style.backgroundColor = '#000';

然而，很多時候我們在修改元素的樣式之前要先保留元素原來的樣式屬性值，或許可以這麼做：

 var bc = element.style.backgroundColor;

這麼做有可能獲取到element元素的background-color屬性值，但是，在多數情況下獲取到的確實 'undefined'，何解？？

原因很簡單，就是element.style只能獲取到element的內聯樣式，而在一個設計良好的網頁檔案裡，樣式表一般是與文件結構分離開來以外部檔案存在的。所以，僅僅用element.style不能如意地獲取元素CSS樣式！

那麼，有什麼方法可以獲取外部樣式嗎？答案是：有的，不過存在 IE 與 W3C 的相容問題！

在 IE 中，element 除了有 style 屬性之外，還有一個 currentStyle 屬性。currentStyle 的用法和 style 的用法一樣，然而不同的是，currentStyle 如名字所示獲取到的是 element 元素當前(所有的)樣式：

 var cbc = element.currentStyle.backgroundColor;//一定是元素當前的樣式

 var bc = element.style.backgroundColor;//多數情況下為undefined，囧...

好了，在 IE 下我們已經解決了獲取外部樣式的問題。然而，在 Firefox 等支援W3C DOM標準的瀏覽器卻不支援currentStyle屬性，所以只能另尋他方了。不用急，DOM也提供獲取元素當前樣式的，只不過稍稍麻煩一點點^_^

DOM提供了一個 getComputedStyle() 方法獲取給定元素的樣式表。這個函式有兩個引數：第一個引數為需要獲取樣式的元素物件；第二個引數為偽元素，如:hover, :first-letter, :before等等，如果不需要偽元素則該引數為null。getComputedStyle()函式可以從 document.defaultView 物件中訪問到，即可以這樣呼叫該函式：

 var cbc = document.defaultView.getComputedStyle(element,null).backgroundColor;

以上語句的作用就是獲取 element 元素當前的 background-color 屬性值。

getComputeStyle()函式的呼叫結果就是 element 元素的樣式表，理應是一個物件。該物件還有一個方法：getPropertyValue()。該方法只有一個引數，即需要獲取的樣式的屬性名，屬性名與樣式表中的形式相同，即背景色的屬性名為 background-color，而非 backgroundColor。

好吧，以下開始定義getStyle()函式，或許分析完以下的程式碼段之後，可以對以上的解說更形象的理解。和以前一樣，凡在標題開頭帶有'[JS庫]'字樣的文章都是為了充實我個人的 JS 庫：pan，所以如果無法理解以下程式碼的編寫形式，請先參閱之前的'[JS庫]'相關博文：

(function(){

    if(!window.pan){
        window['pan']={};
    }

    //pan庫中其它函式的定義，略

    //
    function getStyle(elem,styleName){
        if(elem.style[styleName]){//內聯樣式
            return elem.style[styleName];
        }
        else if(elem.currentStyle){//IE
            return elem.currentStyle[styleName];
        }
        else if(document.defaultView && document.defaultView.getComputedStyle){//DOM
            styleName = styleName.replace(/([A-Z])/g,'-$1').toLowerCase();
            var s = document.defaultView.getComputedStyle(elem,'');
            return s&&s.getPropertyValue(styleName);
        }
        else{//other,for example, Safari
            return null;
        }
    }
    window['pan']['getStyle'] = getStyle;

})();

需要說明的一點是，Safari不支援document.defaultView，所以以上函式獲取元素外部樣式不支援Safari瀏覽器。

這個函式的用法非常簡單，傳遞兩個引數：第一個引數為需要獲取樣式的元素物件；第二個引數為樣式的屬性名，屬性名規則與style一致，即多個單詞的屬性名除了第一個單詞外其它的均需首字母大寫：

 var cbc = pan.getStyle(element, 'backgroundColor');//獲取背景色

 var w = pan.getStyle(element, 'width');//獲取寬度

 var blw = pan.getStyle(element, 'borderLeftWidth');//獲取左邊框的寬度

好了，這個函式就寫到這裡，相信我已經將該函式的內部邏輯結構和用法都說明清楚了，呵呵，我的JS庫又新添了一個函數了^_^

PS：該函式有待改進，如第一個引數可以不侷限於傳遞元素物件。