JS in offset, scroll, client summary

Often encountered offset, scroll, client these keywords, each time a variety of experiments, summarized here.

Two pictures Town House, ready 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.

   • If no parent element the current CSS positioning element's ( positionas absolute / relative), offsetParentof body
   • If the parent element of the current element has CSS positioning ( positionas absolute / relative), offsetParenttaking 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 refers to its absolute height obj control and does not include part due to the overflow are not shown, that is actually occupied by its height, integer, Unit: pixels.
   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 two return that the thickness of the border around the element, its value is typically 0. Because the scroll bar does not appear at the top or left side

---

Most online posts shades, and even some contradictory, the following articles are summarized in the process of learning, if error, found welcome message pointed out -

reference:

1. javascript is offset, client, scroll summary notes
2. JavaScript is easy to understand the offset, scroll, client
3. offset client scroll screen key finishing