【全面总结】js获取元素位置大小

目录

1.关于offset

offsetParent（只读）

offsetTop（只读）

offsetLeft（只读）

offsetHeight（只读）

offsetWidth（只读）

2.滚动尺寸scroll

scrollWidth（只读）

scrollHeight（只读）

scrollLeft（可写）

scrollTop（可写）

3.关于client

clientWidth（只读）

clentHeight（只读）

clientLeft（只读）

clientTop（只读）

4.关于clientRect

getBoundingClientRect

5.应用场景

1.图片懒加载

---

1.关于offset

 

offsetParent（只读）

HTMLElement.offsetParent 是一个只读属性，返回一个指向 最近的（closest，指包含层级上的最近） 包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

 

兼容性：

在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 "none"），或者该元素的 style.position 被设为 "fixed"，则该属性返回 null。

在 IE 9 中，如果该元素的 style.position 被设置为 "fixed"，则该属性返回 null。（display:none 无影响。）

 

块级元素&行内元素

对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。

 

然而，对于可被截断到下一行的行内元素（如 span），offsetTop 和 offsetLeft 描述的是第一个边界框的位置（使用 Element.getClientRects() 来获取其宽度和高度），而 offsetWidth 和 offsetHeight 描述的是边界框的维度（使用 Element.getBoundingClientRect 来获取其位置）。因此，使用 offsetLeft、offsetTop、offsetWidth、offsetHeight 来对应 left、top、width 和 height 的一个盒子将不会是文本容器 span 的盒子边界。

 

offsetTop（只读）

HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。

 

offsetLeft（只读）

HTMLElement.offsetLeft 是一个只读属性，返回 当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。

 

offsetHeight（只读）

HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度 包含该元素的垂直内边距和边框，且是一个整数。

通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。

对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。

 

 

offsetWidth（只读）

是？

HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。

 

 

2.滚动尺寸scroll

可以设置这些值来控制滚动

 

scrollWidth（只读）

元素的scrollWidth只读属性以px为单位返回元素的内容区域宽度或元素的本身的宽度中更大的那个值。若元素的宽度大于其内容的区域（例如，元素存在滚动条时）, scrollWidth的值要大于clientWidth

 

scrollHeight（只读）

Element.scrollHeight 是计量元素内容高度的只读属性， 包括overflow样式属性导致的视图中不可见内容。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。 包括元素的padding，但不包括元素的margin.

 

scrollLeft（可写）

Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。

注意如果这个元素的内容排列方向（direction） 是rtl (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft值为0。此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数（这个特性在chrome浏览器中不存在）。

 

scrollTop（可写）

这个Element.scrollTop 属性可以设置或者获取一个元素被卷起的像素距离。一个元素的 scrollTop 是可以去计算出这个元素最高高度距离它容器顶部的可见高度。当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0.

 

注意：

获取页面向上滚动的距离，有浏览器兼容性问题，获取方法：

document.documentElement.scrollTop||document.body.scrollTop

 

3.关于client

clientWidth（只读）

Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。

 

clentHeight（只读）

返回元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.

 

获取页面高度：document.documentElement.clientHeight

 

clientLeft（只读）

表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。clientLeft 是只读的。

 

clientTop（只读）

一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的。

 

4.关于clientRect

getBoundingClientRect

Element.getBoundingClientRect()方法返回元素的大小及其 相对于视口的位置。

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。

DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的

当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（ 因此，它们的值是 相对于视口 的，而不是绝对的）。

 

兼容性：

意外的好啊有木有？！

 

视口：浏览器可见区域

pc端：视口可以调整

移动端：视口是固定的

 

---

5.应用场景

图片懒加载

教程：Nirvana-zsy/图片懒加载Demo

github源码：Nirvana-zsy/lazyLoad