HTML元素的offsetWidht、clientWidth、scrollWidth属性区别

每个HTML元素都有以下属性

offsetWidth：内容+内边距(padding)+边框+滚动条宽度，以css像素返回它的屏幕尺寸。

offsetHeight：（同上）

offsetLeft：如果offsetParent是null的时候是文档坐标，但对于已定位元素的后代元素和一些其他元素（如表格单元），这些属性返回的是相对于祖元素的而非文档。

offsetTop：（同上）

offsetParent：

 备注：如果对文档坐标和视口坐标不理解可以查看博文《文档坐标和视口坐标》

clientWidth：内容+内边距(padding)。

clientHeight：（同上）

clientLeft：没什么用，返回元素的内边距的外边缘和他们的边框的外边缘之间的水平距离，通常这些值就等于左边的边框宽度。

clientTop：没什么用，返回元素的内边距的外边缘和他们的边框的外边缘之间的垂直距离，通常这些值就等于上边的边框宽度。

注意：对于类似<i>、<code>、<span>这些内联元素，clientWidth、clientHeight、clientLeft、clientTop总是返回0。

有一个特殊案例，在文档的根元素上查询这些属性时，他们返回值和窗口的innerWidth和innerHeight属性值相等。

 

scrollWidth：内容+内边距(padding)+任何溢出内容的尺寸，如果内容正好和内容区域匹配而没有溢出，这些属性与clientWidth和clientHeight相等。

scrollHeight：（同上）

scrollLeft：元素滚动条的位置，是可写属性，通过设置它们让元素中的内容滚动。

scrollTop：（同上）

注意：HTML元素并没有类似Window对象的scrollTo()方法。

window.scrollTo(x,y)

window.scroll(x,y)

window.scrollBy(x,y) 　　//不同于以上两个方法，它的参数相对的

setIntervar(function(){scrollBy(0,10)},200)　　//每200毫秒向下滚动10像素。注意它无法关闭。