获取样式 currentStyle与getComputedStyle

currentStyle与getComputedStyle 都是获取已经设置的样式，如果没有有设置样式就不要获取；
currentStyle（）兼容IE6、7、8
getComputedStyle（）不兼容IE6、7、8
getComputedStyle得到的是计算机（浏览器）经过计算后的样式：如果同时有行内样式和样式表，那么优先选择行内式；如果js中也设置样式，那么优先选择js中的样式；

下面的例子是获取一个盒子的宽度、高度、颜色：

html：

<input type="button" value="点击获得属性" id="btn">
<div id="box"></div>

css：

#box {
width: 200px;
height: 120px;
background-color: red;
}

js：

// 封装获取id函数
function $(id){return document.getElementById(id);}
//按钮点击弹出样式
$('btn').onclick = function(){
    alert(getStyle($('box'),'width'));
    alert(getStyle($('box'),'height'));    
    alert(getStyle($('box'),'backgroundColor'));           
}

// 封装获取样式函数，三目式
function getStyle(obj,attr){    
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}

注意：
获取样式的函数可以写成三目式，也可以写成普通式；上面的js中是三目式，下面是普通式（建议写成三目式）：

if(obj.currentStyle){//兼容IE6、7、8
return obj.currentStyle[attr];
}else{//不兼容 IE6、7、8 
return getComputedStyle(obj)[attr];//不兼容 IE6、7、8
}

封装好的获取样式函数在使用时，直接使用函数名加括号getStyle（），如下：

getStyle($('box'),'width')

解析：
其中$(‘box’)是要获取的元素id；
‘width’是要获取的样式，可以根据需求获取宽、高等；
如果是复合样式则不能用这个方法获取，因为有兼容性问题；复合样式例如：

background:url() no-repeat red ...;

我们要把复合样式改成单一样式（单一样式不要拿来做判断）：

backgroundColor:red;

如果出现undefined，那么可能是因为单引号中间有空格，例如下面’ width’，单引号和width之间有空格：

alert(getStyle($('box'),' width'));

像图片路径、颜色值等都不能拿来做判断，判断绝对会错；