javascript的offset、client、scroll的总结笔记

offset

offsetWidth offsetHeight

• offsetWidth 元素控件自身的宽度。不包括overflow未显示的部分。
• offsetHeight 元素控件自身的高度。

offsetLeft offsetTop

• offsetLeft 指元素距离最近的（带有定位的）父元素的顶部的距离，如果没有定位则为距离根元素（在标准兼容模式下为html元素；在怪异呈现模式下为body元素）顶部的距离。
• offsetLeft 指元素距离最近的（带有定位的）父元素的左侧的距离，如果没有定位则为距离根元素顶部的距离。

offsetParent

offsetParent 返回一个对象的引用，这个对象时距离调用offsetParent属性最近的（在包含层中最靠近的），并且是已进行过css定位的容器元素。如果这个容器元素未进行css定位，则 offsetParent 属性的取值为根元素的引用。当容器元素的 style.dispaly 被设置为“none”

offset.png

scroll

scrollHeight scrollWidth

• scrollHeight 获取对象的滚动高度，对象内部实际内容的高度，包括内容区和内边距，不包括边框。
• scrollWidth 获取对象的滚宽度，对象的实际宽度。

scrollLeft scrollTop

• scrollLeft 获取位于对象左边界和窗口中目前可见内容的最左端的距离。
• scrollTop 获取位于对象上边界和窗口中目前可见内容的最左端之间的距离。

scroll.png

client

clientWidth clientHeight

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

clientTop clientLeft

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

client.png

其他

window.screen 包含有关用户屏幕的信息。

• screen.availWidth 可用的屏幕宽度。
• screen.availHeight 可用的屏幕高度。

offsetTop与style.top的区别

1. offsetTop 返回的是数字，style.top 返回的是字符串，除了数字外还带有单位：px。
2. offsetTop 只读，styleTop 可读写。
3. offsetTop 可以获取行内样式和内嵌样式，style.top只能获取行内样式。
4. 如果没有加定位，style.top 获取的数值可能是无效的。