关于js获取样式笔记

来源：互联网发布：vgn p17h装linux 编辑：程序博客网时间：2024/06/07 15:57

遇到一个小问题，这里记录一下，免得忘记。
关于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

0 0