offset和client获取dom元素位置信息

offset获取元素宽高和偏移量

• offsetTop获取元素上部相对于带定位的父元素偏移的距离，若父元素均不带定位则返回相对于body的距离
• offsetLeft作用同offsetTop
• offsetParent返回元素带有定位的父元素，父元素均不带定位则返回body
• offsetWidth返回元素元素宽度，包括padding，边框，内容区域的宽度
• offsetHeight作用同offsetWidth

offset与style的区别

最明显的区别在于offset获取到的属性值是只读属性，不能用于修改元素本身的大小和偏移量，是不带单位的数值
而style获取的属性值是读写属性，可以用于修改元素本身的大小和偏移等
此外，style只能获取到元素在行内样式中指定的样式属性，而offset可以获取元素在任意方式下指定的属性

点击事件获取鼠标坐标

• e.pageX可以获取点击事件的鼠标距离页面左侧距离
• e.pageY可以获取点击事件的鼠标距离页面上侧距离

client获取元素边框和宽高

• clientTop获取上边框大小
• clientLeft获取左边框大小
• clientWidth获取元素宽度，不包含边框
• clientHeight获取元素高度，不包含边框

scroll获取滚动信息

• scrollTop获取元素被卷去的上侧距离
• scrollLeft返回元素被卷去的左侧距离
• scrollWidth获取元素自身宽度 不含边框
• scrollHeight获取元素自身高度 不含边框 与clientHeight的区别在于，当元素内容溢出时，scrollHeight或返回包含溢出内容的高度，而clientHeight则不会

获取页面的滚动距离

• window.pageXOffset获取整个页面上滚的距离
• window.pageYOffset获取整个页面右滚的距离

获取一个元素距离浏览器可视窗口的距离

rectObject = object.getBoundingClientRect();
rectObject.top：元素上边到视窗上边的距离;
rectObject.right：元素右边到视窗左边的距离;
rectObject.bottom：元素下边到视窗上边的距离;
rectObject.left：元素左边到视窗左边的距离;
rectObject.width：是元素自身的宽
rectObject.height是元素自身的高