原生JS和jQuery的offset，client，scroll对比

原生

offsetTop    //获取元素距离带有定位父元素的位置(没有则以body)
offsetLeft
offsetWidth   //获取元素自身的大小(宽度和高度) 包括了border 和padding
offsetHeight
offsetParent    //返回带有定位的父盒子 没有则是body
                //返回的值不带单位


clientTop  //返回元素上边框大小
clientLeft //返回元素左边框大小
clientWidth //包括padding不包括border 返回值不带单位
clientHeight //高度


document.documentElement.scrollTop   //返回被卷去的高度，不带单位 //可读可写
document.documentElement.scrollLeft
document.documentElement.scrollWidth  //返回自身实际的宽度(滚动宽度)，不含边框，不带单位
document.documentElement.scrollHeight  

window.pageYOffset  //页面被卷去 //可读不可写
window.pageXOffset

window.scroll(x, y) //滚动窗口至文档中的特定位置
window.scroll(0, 100) //不加单位 //已废弃被scrollTo替代
window.scrollTo() //


offset系列和style的区别
style只可以获取行内样式，不可以获取css样式里面的，所以如果行内没写，则获取不到
style是可读可写的。offset是只读属性。
offset获取的是不带单位的。style获取的是带单位的
offset获取的带padding和border，而style获取的不带

 

 

jQuery

width()    //只算width  可读可写 写的时候可以不要带单位
height()

innerWidth()   //包括padding
innerHeight()

outerWidth()    //包括border
outerHeight()

outerWidth(true)   //包括margin
outerHeight(true)


offset()  //设置或获取元素相对于视口的偏移量 //可以不写单位 //可读可写 返回的是一个对象，里面有left和top
position() //相对于带有定位的父级偏移。父级没有则文档 //可读不可写
scrollTop() // 被卷去读高度 //可读可写  
//下面这3种方法都可以
//$(document).scrollTop(100) $(window).scrollTop(100) $(document.documentElement).scrollTop(100)

// 注意     只有在document.documentElement对象中 有一个scrollTop属性。就是被卷去读高度
            //所以在使用$().animate({})时， $('html').animate({ scrollTop: 1000 }, 3000)
scrollLeft()

 

 

事件event

e.clientX //相对于窗口的X
e.clientY //
e.pageX  //相对于文档页面
e.pageY //
e.screenX // 相对于电脑屏幕
e.screenY
e.offsetX //相对于点击的当前元素
e.offsetY

 

 

来源：https://www.cnblogs.com/flyerya/p/11696063.html