记录函数 getStyle() 获取元素 CSS 样式

浏览数：17 / 时间：2015年06月09日

设置元素(element)的css属性值可以用element的style属性，例如要将element的背景色设置为黑色，可以这么做：

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;