关于js获取样式笔记

遇到一个小问题，这里记录一下，免得忘记。

关于js获取样式的。

比较常用的方法是:element.style.width.这种用法有2个注意点：

1、style获取到的是html中标签的内嵌样式，例如：

<div id="div1" style="width:100px"></div>
<script>
var div1 = document.getElementById("div1");
console.log(div1.style.width);
</script>

这里输出就为100px。

2、要注意的是这里的width是有单位的，并且是一个字符串，所以在js中如果要设置它记得加上“px”（或者其他单位），而如果要在js中使用这个数值，则记得用parseInt（）来转换。

例如：

console.log(div1.style.width);
console.log(parseInt(div1.style.width));

第一行输出的是100px，第二行就是100了。O(∩_∩)O~·~

在第1点里有说到，这是获取内嵌样式的方法，那么如果要获取最终所有的css样式的话，就要用到别的方法：

在IE里面的是currentStyle，而在别的浏览器中是getComputedStyle，2者方法略有区别。

currentStyle是DOM元素的属性，使用方法：

obj.currentStyle[attribute]

getComputedStyle是DOM的一个全局方法，使用：

getComputedStyle(obj,"伪类")[attribute]

可以将他们写成一个方法：

function getStyle(obj,arr){
if(obj.currentStyle){
return obj.currentStyle[arr];
}
else{
return getComputedStyle(obj,false)[arr];
}
}

另外要注意的是：getComputedStyle方法是一个只读方法，不能设置，

更详细的相关设置，可参考别人总结的：【转】http://www.zhangxinxu.com/wordpress/?p=2378