JS获取DOM元素CSS样式的方法

CSS 样式有两种类型：

1.行内样式：

通过元素的 style 属性定义的样式。

2.非行内样式：

通过 <style> 标签或引入外部 CSS 文件定义的样式。

针对 DOM 元素的行内样式，可以从 DOM.style 样式集合中读取对应行内样式属性，如：DOM.style.width、DOM.style.height 等。而要获取非行内样式，则需要通过 window.getComputedStyle()（W3C）方法或 DOM.currentStyle（IE）当前样式集合属性去获取。

window.getComputedStyle 用法：

window.getComputedStyle(element, pseudoElement)，element 是必需参数，传入要获取样式的元素；pseudoElement 是可选参数，伪类元素，当不查询伪类元素的时候可以忽略或者传入 null。window.getComputedStyle() 方法返回样式集合的对象，读取该对象的属性即可获取到样式。

DOM.currentStyle 用法：

DOM.currentStyle[attr]，attr 是要获取的样式属性名称。

综上，可以编写出以下函数：

// element 要获取 CSS 样式的 DOM 元素
// attr 要获取的 CSS 样式属性名称
function getStyle(element, attr) {
    if (window.getComputedStyle) { // W3C
        return window.getComputedStyle(element, null)[attr];
    } else if (element.currentStyle) { // 兼容 IE8 及以下浏览器
        return element.currentStyle[attr];
    }
}