【转载】javascript getComputedStyle,getPropertyValue,CurrentStyle说明
http://hi.baidu.com/jiang_yy_jiang/item/95217544ea5a31e6bdf451ae
当你看到这篇文章的时候，我就纳闷了，这个属性你为啥用得上？估计是高手来着？哈哈！或者说瞥见了某个大型网站或者某个帖子电子书里关于这几个属性的介绍，来百度没事查查？ 哎 说这么多，其实也没啥的，还是分享一下下面这个例子：
杯具般的程序员，先看看getPropertyValue吧，其实做程序员很苦的，换行吧！
Dom 中的getPropertyValue方法可以用来获取元素中指定的css属性值．该方法支持W3C标准．与IE中的currentStyle方法作用相同．都是根据指定的css属性名称来获取属性值．比如要获取某div的宽度是多少，文字排放text-align是怎么对齐的，以及position如何定位的．
他们的区别是：
1：getPropertyValue必须配合getComputedStyle方法一起使用．
2：getPropertyValue支持W3C标准．但不支持IE浏览器，
3：currentStyle非W3C标准．只支持IE.不能在FF等浏览器下使用．
如果想在多浏览器里实现这种效果，必须根据判断浏览器来配合使用．我在下面会给出一个兼容IE和FF等浏览器获取元素css属性值的例子．
语法：css_value=window.getComputedStyle.getPropertyValue(css_name) 返回值：
css_value:返回对某个css属性值的引用．如:text-align值，position值等．
参数
window.getComputedStyle:直接使用window对象调用getComputedStyle方法来获取所有可用的css属性．
css_name:要获取的css属性值的名称．比如:text-align,position,background等等．
<html>
<head>
<title>Dom:currentStyle使用实例</title>
<style>
#a{
border:1px solid;
width:200px;
height:100px;
text-align:center;
position:absolute;
}
</style>
</head>
<body>
<div id="a"></div>
<script language="javascript">
var a = document.getElementById("a")//获取元素
if(document.all){//IE浏览器
var wh = a.currentStyle["width"];
var text_align = a.currentStyle["textAlign"];
var posi = a.currentStyle["position"];
}
else{//FF或其他浏览器
var wh = window.getComputedStyle(a,null).width;
var text_align = "textAlign"; //凡是带横杠(-)的属性，在FF浏览器里必须转换一下属性名称
text_align = text_align.replace(/([A-Z])/g,"-$1");//使用正则转换
text_align.toLowerCase();
text_align = window.getComputedStyle(a,null).getPropertyValue(text_align);
var posi = window.getComputedStyle(a,null).getPropertyValue("position");
}
alert("宽度值是：" + wh);
alert("文本排放是：" + text_align);
alert("position值是：" + posi);
</script>
</body>
</html>
经测试getPropertyValue至少兼容以下浏览器:Firefox
W3C标准：是
接下来这个就是getComputedStyle咯，这个哥们你就要注意了，只针对火狐哈！都说要你别搞什么BS了，还要考虑这些头痛问题！
Dom 中getComputedStyle方法可用来获取元素中所有可用的css属性列表．以数组形式返回．注意啊getComputedStyle不会直接返回元素中某个css样式的属性值．他返回的是一个数组．这个数组中包括所有可用的css属性．例如:float,positin,border,background等等．
通常这个方法必须配合getPropertyValue属性使用，才可以获取指定的css属性值，如只想获取width的值或text-align以及left的值.就必须使用getPropertyValue属性．为了方便理解．我在下面例子中只演示getComputedStyle方法的作用．
该方法不支持IE浏览器，请使用FF和其他支持Dom标准的浏览器查看．
如果想了解获取某个属性的值，请点击:currentStyle或getPropertyValue
语法：arr_style=window.getComputedStyle(elem_id,ov); 返回值：
arr_style:以数组的形式．返回所有的css可用属性．
参数
window:直接调用window对象访问getComputedStyle方法．
elem_id:元素的id,要获取该元素的css样式
ov:伪元素，是否要获取伪元素属性值．如hover,active,link等属性．如果不想获取这些伪元素的属性值请填写为null.
<html>
<head>
<title>Dom:getComputedStyle使用实例</title>
</head>
<body>
<h2>第一次会弹出获取的css属性数组的长度，然后依次弹出可用属性,大家会发现background-attachment,background-color,background-image
看完例子你应该会明白getComputedStyle具体作用了，如果想获取某个属性的值．请配合使用getPropertyValue
<div id="a"></div>
<script language="javascript">
var a = document.getElementById("a")//获取元素
var arr_style = window.getComputedStyle(a,null);
alert(arr_style.length);//数组的长度．包含所有css可用属性
alert(arr_style[0]);//我们来看看数组第一个css属性是什么
alert(arr_style[1]);//再来看第二个
alert(arr_style[2]);//再来第三个
</script>
</body>
</html>
下面一个CurrentStyle就只针对IE了，哥们我跟你说进程序员这个行业，没有十足爱好那么你还是收手吧！也许还来得及的！
Dom 中的currentStyle属性．从字面上理解这是当前样式风格．没错currentStyle就是用来获取元素内Css的style样式属性值．比如说元素的width值height值．甚至元素的文本排放方式text-align,包括position等等．所有的css属性值都可以被获取．但是 currentStyle仅支持IE浏览器，如若想在FF或基于Dom标准的其他浏览器内实现相同效果．请使用getComputedStyle属性．我在下面给出一个例子，来获取div的宽度值，文本如何排放．和绝对定位的值．已支持IE和FF其他浏览器．放心浏览！
语法：o=elem.currentStyle[style_name]; 返回值：
o:返回元素某个样式属性值的引用．
参数
elem:要在该元素内获取样式属性．
style_name:样式属性名称．如：width,height,text-align
currentStyle实例 <html>
<head>
<title>Dom:currentStyle使用实例</title>
<style>
#a{
border:1px solid;
width:200px;
height:100px;
text-align:center;
position:absolute;
}
</style>
</head>
<body>
<div id="a"></div>
<script language="javascript">
var a = document.getElementById("a")//获取元素
if(document.all){//IE浏览器
var wh = a.currentStyle["width"];
var text_align = a.currentStyle["textAlign"];
var posi = a.currentStyle["position"];
}
else{//FF或其他浏览器
var wh = window.getComputedStyle(a,null).width;
var text_align = "textAlign"; //凡是带横杠(-)的属性，在FF浏览器里必须转换一下属性名称
text_align = text_align.replace(/([A-Z])/g,"-$1");//
text_align.toLowerCase();
text_align = window.getComputedStyle(a,null).getPropertyValue(text_align);
var posi = window.getComputedStyle(a,null).getPropertyValue("position");
}
alert("宽度值是：" + wh);
alert("文本排放是：" + text_align);
alert("position值是：" + posi);
</script>
</body>
----------------------------------------------------------以上为原文--------------------------------------------------------------------------
今天也是头一次接触这个方法，原因是在搞一个Splitter bar控件时，它的Splitter的absolute定位有问题，通过查文档知道absolute定位在遇到父级结点且Position是Relative时，就以该父结点进行定位。那在通过结点获取Offsetleft和Offsettop时就需要判断当前的OffsetParent的Position是什么，而直接从el.style.position是获取不到的，因为不是inline的style，直接取就取不到，就需要使用上文中介绍的方法，当然，更为通用的方法是：
function getStyle(el,styleProp) { var x; if (typeof(el) == "string") { x = document.getElementById(el); } else{ x=el; } if (x.currentStyle) var y = x.currentStyle[styleProp]; else if (window.getComputedStyle) var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); return y; }
参考文章：
http://www.quirksmode.org/dom/getstyles.html
