北京网站建设学习,骏域网站,电商网站建设策划方案,wordpress页面不显示最近自己实现了一个瀑布流的插件#xff0c;里面需要获取元素相关的尺寸#xff0c;所以趁此想总结一下元素尺寸相关的内容。
本文大纲#xff1a; 1、偏移尺寸#xff08;offset#xff09;
offset#xff1a;偏移 offsetLeft、offsetTop、offsetHeight、offsetWidth …最近自己实现了一个瀑布流的插件里面需要获取元素相关的尺寸所以趁此想总结一下元素尺寸相关的内容。
本文大纲 1、偏移尺寸offset
offset偏移 offsetLeft、offsetTop、offsetHeight、offsetWidth 偏移尺寸包含元素在屏幕上占用的所有视觉空间。 元素在页面上的视觉空间由其高度和宽度决定包括所有内边距padding、滚动条和边框但不包含外边距margin。以下4个属性用于取得元素的偏移尺寸。
offsetTop元素上边框外侧距离包含元素也就是offsetParent上边框内侧的像素数。(不包括元素上边框的高度)。所以offsetTop是相对尺寸相对于offsetParent。offsetLeft元素左边框外侧距离包含元素也就是offsetParent左边框内侧的像素数。(不包括元素左边框的宽度)。所以offsetLeft是相对尺寸相对于offsetParent。offsetHeight元素在垂直方向上占用的像素尺寸包括它的高度、水平滚动条高度如果可见和上下边框的高度。offsetHeight 上下border 上下padding heightoffsetHeight是绝对尺寸元素本身的高度加上上下内边距和上下边距offsetWidth元素在水平方向上占用的像素尺寸包括它的宽度、垂直平滚动条宽度如果可见和左右边框的宽度。offsetWidth 左右border 左右padding widthoffsetWidth是绝对尺寸元素本身的宽度加上左右内边距和左右边距
再次强调其中offsetTop和offsetLeft是相对于包含元素的包含元素保存在offsetParent属性中。
具体尺寸关系图如下 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没有滚动条出现时元素内容的总宽度。
具体尺寸图关系如下 4、确定元素尺寸
浏览器在每个元素都暴露了getBoundingClientRect()方法返回一个DOMRect对象包含6个属性left、top、right、bottom、height和width。这些属性给出了元素在页面中相对于视口的位置。 其中lefttoprightbottom是相对于视口的位置 都是以视口应该说是可视区域的左上角为原点0,0。不是相对于父级元素的
left元素的左边框距离视口左边的距离right元素的右边框距离视口左边的距离left元素的width左右padding左右bordertop元素的上边框距离视口上边的距离bottom元素的下边框距离视口上边的距离top元素的height上下padding上下borderwidth左右border 左右padding 元素的widthheight上下border 上下padding 元素的height
