offset、client 、scroll、style获得高、宽、top、left、right、buttom的区别

一.区别

offsetWidth:padding、border、内容区宽度

clientWidth:padding、内容区宽度

scrollWidth:内容区宽度

style.width:获得不包含padding和border 的值

二.他们主要用法：

1.offset系列 经常用于获得元素位置    offsetLeft  offsetTop

2.client经常用于获取元素大小  clientWidth clientHeight

3.scroll 经常用于获取滚动距离 scrollTop  scrollLeft

4.注意页面滚动的距离通过 window.pageXOffset  获得

5.style 给元素更改值

注意：1.offset、client 、scroll都只是只读属性不可赋值，得到的数据不带单位'px'..

注意：2.style是可读写属性

• style 只能得到行内样式表中的样式值
• style.width 获得的是带有单位的字符串
• style.width 获得不包含padding和border 的值
• style.width 是可读写属性，可以获取也可以赋值
• style.top 获得是带单位'px'的字符串