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.csdn.net/qq_35809245/article/details/53981843