最近自己实现了一个瀑布流的插件,里面需要获取元素相关的尺寸,所以趁此想总结一下元素尺寸相关的内容。
本文大纲:
1、偏移尺寸(offset)
offset:偏移
offsetLeft、offsetTop、offsetHeight、offsetWidth
偏移尺寸,包含元素在屏幕上占用的所有视觉空间。
元素在页面上的视觉空间由其高度和宽度决定,包括所有内边距(padding)、滚动条和边框(但不包含外边距(margin))。以下4个属性用于取得元素的偏移尺寸。
- offsetTop,元素上边框外侧距离包含元素(也就是offsetParent)上边框内侧的像素数。(不包括元素上边框的高度)。所以offsetTop是相对尺寸,相对于offsetParent。
- offsetLeft,元素左边框外侧距离包含元素(也就是offsetParent)左边框内侧的像素数。(不包括元素左边框的宽度)。所以offsetLeft是相对尺寸,相对于offsetParent。
- offsetHeight,元素在垂直方向上占用的像素尺寸,包括它的高度、水平滚动条高度(如果可见)和上下边框的高度。offsetHeight = 上下border + 上下padding + height,offsetHeight是绝对尺寸,元素本身的高度加上上下内边距和上下边距
- offsetWidth,元素在水平方向上占用的像素尺寸,包括它的宽度、垂直平滚动条宽度(如果可见)和左右边框的宽度。offsetWidth = 左右border + 左右padding + width,offsetWidth是绝对尺寸,元素本身的宽度加上左右内边距和左右边距
再次强调,其中offsetTop和offsetLeft是相对于包含元素的,包含元素保存在offsetParent属性中。
具体尺寸关系图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/1e817be62f01409993ec46854d7f5762.png#pic_center)
2、客户端尺寸(client)
client:客户,顾客
元素的客户端尺寸,包含元素内容及其内边距所占用的空间。客户端尺寸只有两个相关属性:clientWidth和clientHeight。(不包含边框border)
clientWidth:是内容区宽度加左、右内边距宽度。clientWidth = 左右padding + width
clientHeight:是内容区高度加上、下内边距高度。clientWidth = 上下padding + height
客户端尺寸实际就是元素内部的空间,因此不包含滚动条占用的空间。这两个属性最常用于确定浏览器视口尺寸,即检测document.documentElement的clientWidth和clientHeight。这两个属性表示视口(或元素)的尺寸。
document.documentElement.clientHeight // 会随着屏幕的大小而变化
document.documentElement.clientWidth // 会随着屏幕的大小而变化
注意:与偏移尺寸一样,客户端尺寸也是只读的,而且每次访问都会重新计算。
具体尺寸图关系如下:
3、滚动尺寸(scroll)
- scrollTop:内容区域顶部隐藏的像素数,设置这个属性可以改变元素的滚动位置。
- scrollLeft:内容区域左侧隐藏的像素数,设置这个属性可以改变元素的滚动位置。
- scrollHeight:没有滚动条出现时,元素内容的总高度。
- scrollWidth:没有滚动条出现时,元素内容的总宽度。
具体尺寸图关系如下:
![](https://i-blog.csdnimg.cn/blog_migrate/40ce3ad3d3b17966343cb3a12412d00f.png#pic_center)
4、确定元素尺寸
浏览器在每个元素都暴露了getBoundingClientRect()方法,返回一个DOMRect对象,包含6个属性:left、top、right、bottom、height和width。这些属性给出了元素在页面中相对于视口的位置。
其中left,top,right,bottom是相对于视口的位置( 都是以视口(应该说是可视区域)的左上角为原点(0,0)。不是相对于父级元素的)
- left:元素的左边框距离视口左边的距离
- right:元素的右边框距离视口左边的距离(left+元素的width+左右padding+左右border)
- top:元素的上边框距离视口上边的距离
- bottom:元素的下边框距离视口上边的距离(top+元素的height+上下padding+上下border)
- width:左右border + 左右padding + 元素的width
- height:上下border + 上下padding + 元素的height