05-JS特效-缓动动画-获取元素样式（行内、内嵌、外链）

火狐谷歌IE9+ : window.getComputedStyle(元素，null).width;

ie678: 元素.currentStyle.width;

getComputedStyle 和 currentStyle 获取到的都是对象

属性值的获取：

只能获取行内式：（既能获取又能赋值）

div.style.width 单个赋值

div.style[“width”] 变量赋值

获取任意类型的CSS样式的属性值：（只能获取）

div.currentStyle.width; 单个获取 (IE678)

window.getComputedStyle(div,null).width;

div.currentStyle[“width”]; 变量获取 (IE678)

window.getComputedStyle(div,null)[“width”];

参数1：获取属性的元素。

参数2：伪元素，C3学习。

//这两个方法不管是行内式、内嵌式、外联式的样式，都可以获取（自己测试吧...）

//火狐谷歌IE9+：获取样式方法；带单位
console.log(window.getComputedStyle(box,null).width);//200px;行内
console.log(window.getComputedStyle(box,null).height);//300px;外链
console.log(window.getComputedStyle(box,null).left);//100px;内嵌

//IE678：获取样式方法：带单位
console.log(box.currentStyle.width);
console.log(box.currentStyle.height);
console.log(box.currentStyle.left);

//封装一个兼容写法：
function getStyle(ele,attr){
//如果浏览器支持该方法，那么返回值是一个函数体；如果不支持是undefined；
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}else{
return ele.currentStyle[attr];
}
}