JavaScript中offset系列和scroll系列的总结

获取元素样式属性值

在写js代码的时候经常需要获取元素样式属性值，js中获取该值的基本方法有两种，分别是offset系列和getComputedStyle（或者currentStyle）两种，现在对两种方法分别做总结。

一、offset系列

1、定义以及用法

offset：js代码中是无法通过“对象.style.属性名”来获取属性值的，所以此时需要用到offset系列api来完成。常用的offset系列有四个，分别是offsetLeft（获取元素样式属性left的值），offsetTop（获取元素样式属性top的值），offsetWidth（获取元素样式属性width的值），offsetHeight（获取元素样式属性height的值）。用法是“元素对象.offset系列”。

2、注意事项

1、虽然在写元素样式属性值的时候带有单位px（或者其他单位）,但是offset系列获取的属性值是没有单位的，所以可以直接做算数运算，并且在赋值给其他元素的时候，不要忘记加单位（+“px”或者其他）；
2、offset系列得到的值并不是样式中的直接量。其中，offsetLeft获取的是left和margin-left属性值的和，offsetTop获取的是top和margin-top属性值的和，offsetWidth获取的是width和2倍padding以及2倍border的属性值的和。offsetHeight获取的是height和2倍padding以及2倍border属性值的和。因此在使用的过程中一定要注意这些问题。例如，当元素未脱离文档流的时候，设置left属性的值为200px，当使用offsetLeft的值就是零，而并不是样式中写的200px。

二、getComputedStyle和currentStyle

1、定义以及用法

getComputedStyle：使用getComputedStyle可以获取样式属性的直接量（属性名称冒号后边的值和单位），用法是window.getComputedStyle(element,null)[attr]，其中element表示元素，attr表示需要获取的属性名称
currentStyle：使用currentStyle同样可以获取样式属性的直接量（属性名称冒号后边的值和单位），用法是element.currentStyle[attr]；其中element表示元素，attr表示需要获取的属性名称
上述两种方法是针对不同浏览器的处理方式，第一种针对的是谷歌浏览器和火狐浏览器，第二种针对的是IE8浏览器，所以需要做兼容处理。兼容处理代码如下：
function getStyle(element,attr) {
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}

2、注意事项

1、上述两种方法返回的是字符串，所以当需要进行运算处理的时候，需要用parseInt转换成数值之后再进行相应的运算和赋值
2、计算完成后进行赋值的时候不要忘记与“px”进行拼接，否则无法实现效果。