BOM offset,scroll,client区别

offset,scroll,client

1. offset

    offset 指偏移，包括这个元素在文档中占用的所有显示宽度，包括滚动条、padding、border，不包括overflow隐藏的部分

1. offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的父级元素中最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。

   • 如果当前元素的父级元素中没有进行CSS定位，offsetParent为body
   • 如果当前元素的父级元素中有CSS定位（position），offsetParent取父级中最近的元素
   • div本身宽高就包含了滚动条宽高，滚动条会导致显示内容空间被压一点点
2. obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位：像素。
   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
7. offset是只读属性 只能读取 不能修改
8. 没有offsetRight和offsetBottom属性
9. 

2. scroll

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

1. scrollHeight 获取对象的滚动高度，对象的实际高度；
2. scrollLeft 设置或获取box滚动向左的距离
3. scrollTop 设置或获取box向上滚动出去的距离
4. scrollWidth 获取对象的滚动宽度
5. onscroll  拖动滚动条事件
6. 

3. client

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

1. clientWidth 对象可见的宽度，不包括滚动条等边线，会随窗口的显示大小改变
2. clientHeight 对象可见的高度 
3. clientTop、clientLeft 这两个返回的是元素周围边框的厚度，一般它的值就是0。因为滚动条不会出现在顶部或者左侧

 

 

height width 三种差别

offset包含滚动条 border 

scroll 是整体高度，包括没显示出来部分，含padding 不含滚动条和border

client 是包含padding  不包含滚动条，border。可视内容宽度。比offset少滚动条和border

 

top，left差别

offsetTop，Left 距离最近带定位父元素的距离，lef

scrollTop,Left   scrollTop和scrollLeft  被卷去部分的 顶部/左侧 到可视区域 顶部/左侧 的距离

 

1、offset    偏移

1、offsetWidth 和 offsetHeight 是用来得到对象的大小，由自身宽高 内边距 边框构成但是不包括 外边距

offsetHeight和style.height的区别

1> style.height只能获取行内样式，offsetHeight可以获取行内样式和内嵌样式

2> style.height是字符串（而且带单位），offsetHeight是数值

3> style.height可读可写，offsetHeight是只读属性

 

2、offsetLeft 和 offsetTop 用来得到对象的位置，到距离自身最近的（带有定位的）父元素的左侧/顶部 的距离，如果所有父级都没有定位则以body 为准

offsetLeft和style.left的区别

1> style.left只能获取行内样式，offsetLeft 可以获取行内样式和内嵌样式

2> offsetLeft 只读，style.left可读可写

3> offsetLeft是数值，style.left是字符串并且有单位px

4> 如果没有加定位，style.left获取的数值可能是无效的

5> 最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准

 

 

page

pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。就是页面滚动条上下移动距离

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。这些属性是只读的。