obj.currentStyle.property、window.getComputedStyle(obj,null).property、obj.style.property 获取与元素属性的总结

一 ：先看定义：
1 obj.style.property 是一个可读可写的，不仅可以获取属性的值，而且可以改变属性的值；
但是需要注意的是此方法只能获取内嵌在行内元素的属性值，而不能获取内联在 style 标签 里面的属性值，如果内嵌式没有设置某属性（比如width），而要通过obj.style.width 来获取该属性值，那么获取的结果 空字符串
2 obj.currentStyle.property 是IE浏览器的孤僻的支持的获取元素属性值得方法，可以获得任何位置设置的元素的属性值，包括内嵌式，内联式，外联式；
3 window.getComputedStyle(obj,null).property 是一个比较大众的方法，谷歌，火狐，opera,sarifi都支持该方法获取元素的属性，其中第二个参数是伪类，如果需要获取的不是伪类，需要将该值设置为null;
4 总结 ：obj.style.property只能获取元素的内嵌式样式属性值，其他两个可以获取内嵌式，内联式 ，外联式中设置的属性值。
二 测试三种方法类型

    var style = window.getComputedStyle (my$("dv"),null);
    console.log("getComputedStyle是"+style);
    // 输出：getComputedStyle是[object CSSStyleDeclaration]
    var style1 = my$("dv").currentStyle;
    console.log("currentStyle是"+style1);
    // 输出：getComputedStyle是[object CSSStyleDeclaration]
    var style2 = my$("dv").style;
    console.log("style是"+style2);
    // 输出：getComputedStyle是[object CSSStyleDeclaration]

由此可知每种方法都是可以获取某元素的css样式对象。

三，代码演示

1 设置样式属性的情况：

内嵌式：
html代码

<div id="dv" style="width:50px; height : 40px"></div>

js代码

var dv = document.getElementById("dv");
console.log(dv.style.width);
console,log(dv.style.height);
console.log(window.getComoutedStyle(dv,null).width;
console.log(dv.currentStyle.width);//Ie浏览器

输出结果：
50px ;
40px
;50px;
50px ;

内联式或者外联式

html代码

style{
    width:50px;
    height:40px;
}
<div id="dv" style="width:50px; height : 40px"></div>

js代码：

var dv = document.getElementById("dv");
console.log(dv.style.width);
console,log(typeof dv.style.height);
console.log(window.getComoutedStyle(dv,null).width;
console.log(dv.currentStyle.width);//Ie浏览器

输出结果 ：
空字符串
string
50px
50px

2 不设置样式属性的情况，此时只能
a obj.currentStyle.property、window.getComputedStyle(obj,null).property
b 通过 offsetWidth 和 offsetHeight 注意
来获取元素的宽高
html 代码：

    <div id="dv">没有设置样式</div>

js代码：

    var dv = document.getElementById("dv");
    console.log(dv.style.width);
    console,log(typeof dv.style.height);
    console.log(window.getComoutedStyle(dv,null).width;
    console.log(dv.currentStyle.width);//Ie浏览器
    console.log(dv.offsetWidth);
    console.log(dv.offsetHeight);

输出结果：

空字符串
18px
1350px(div元素独占一整行浏览器的显示宽度）
1350px(div元素独占一整行浏览器的显示宽度）
1350
18

如果将div进行元素转化：

    <div id="dv" style="position:absolute;">没有设置样式</div>

输出结果：

空字符串
18px
96px
96px
18
96

四 总结：
1 当给元素设置了样式属性的时候，obj.style只能获取内嵌式， obj.currentStyle.property、window.getComputedStyle(obj,null).property;可以获取任意位置样式属性值，仅仅可读；
offsetWidth offsetHeight 获取的宽高包括元素的 content（width+height）+ padding+border；而 obj.style， obj.currentStyle.property、window.getComputedStyle(obj,null).property获取的元素的宽高指的仅仅是 width 和height ,不包括 padding和border
2 如果没有给元素设置样式obj.currentStyle.property、window.getComputedStyle(obj,null).property 和offsetWidth offsetHeight都可以获取由内容撑开的宽高

五 offset系列其他属性总结：
http://blog.youkuaiyun.com/qq_35809245/article/details/53981843