你的位置:首页 > Java教程

[Java教程]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像素。注意它无法关闭。