JS ten minutes to quickly understand the offset, scroll, client

https://mp.weixin.qq.com/s/roOEOKpvp2yXCDxKOxeBoA

Often encountered in the development of the next offset, scroll, client these keywords, such as offsetLeft, offsetHeight, scrollHeight, what clientTop, and every time a variety of experiments, summarized here about, once and for all.

First two pictures Town House, at any time convenient to read

1. offset

offsetRefers to the offset , the width of the display element comprises all occupied in the document, including the scroll bar padding, borderdoes not include overflowthe hidden portion

1. offsetParentProperty returns a reference to an object, the object distance calling  offsetParentparent element in the most recent (nearest in the containment hierarchy), has been and is a container element CSS positioning. If the container is not performed CSS positioning element, the  offsetParentvalue of the root attribute is a reference element.

1. If no parent element the current CSS positioning element's ( positionas absolute / relative),  offsetParent of body

2. If the parent element of the current element has CSS positioning (  position as absolute / relative),  offsetParent taking the nearest parent element

2. obj.offsetWidth refers to the absolute width obj control itself, does not cover damage overflowwithout display section, its width is actually occupied, integer, Unit: pixels.

   offsetWidth = border-width*2+ padding-left+ width+ padding-right

3. obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型，单位：像素。

   offsetHeight = border-width*2+ padding-top+ height+ padding-bottom

4. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位：像素。

   offsetTop= offsetParent的padding-top + 中间元素的offsetHeight + 当前元素的margin-top

5. obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位：像素。

   offsetLeft= offsetParent的padding-left + 中间元素的offsetWidth + 当前元素的margin-left

 

2. scroll

scroll指滚动，包括这个元素没显示出来的实际宽度，包括 padding，不包括滚动条、 border

1. scrollHeight 获取对象的滚动高度，对象的实际高度；

2. scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

3. scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

4. scrollWidth 获取对象的滚动宽度

 

3. client

client指元素本身的可视内容，不包括 overflow被折叠起来的部分，不包括滚动条、 border，包括 padding

1. clientWidth 对象可见的宽度，不包括滚动条等边线，会随窗口的显示大小改变

2. clientHeight 对象可见的高度

3. clientTop、clientLeft 这两个返回的是元素周围边框的厚度，一般它的值就是0。因为滚动条不会出现在顶部或者左侧