javascript 获取 dom 样式

大家通常想到的思路是什么?通过 style 获取 ?

var dom = document.querySelector("#id");
// 获取宽度
var width = dom.style.width;
// 设置宽度
dom.style.width = "100px";

大家有没有发现通过这个方式没办法获取 css 文件中的样式属性, 这个方法只能获取内联样式。

currentStyle

currentStyle 是 IE & opera 上支持的方法

getComputedStyle

getComputedStyle 是 w3c 的标准文档

在书写代码时就得做兼容处理, 如下

var dom = document.querySelector("#id");
var css;
// 支持标准文档的浏览器
if(window.getComputedStyle){
    css = window.getComputedStyle(dom)
// 非标准文档的浏览器
}else{
    css = dom.currentStyle;
}
//获取宽度
var width = css['width'];