javascript-offset、client、scroll相同和区别

offset、client、scroll相同点：

都可以获取元素的大小

offset、client、scroll不同点：

offset- - -获取元素宽高时，包含边框
client- - -获取元素宽高时，不包含边框；不包含元素超出的内容大小
scroll- - -获取元素宽高时，不包含边框；包含元素超出的内容大小

scroll一般和滚动条有关，可以动态得到元素的大小、滚动距离等

元素对象.offsetWidth- - -获取元素的宽度，含边框
元素对象.offsetHeight- - -获取元素的高度，含边框
元素对象.offsetLeft- - -获取元素左偏移量（相对父元素）
元素对象.offsetTop- - -获取元素右偏移量（相对父元素）

元素对象.clientTop- - -获取元素上边框的大小
元素对象.clientLeft- - -获取元素左边框的大小
元素对象.clientWidth- - -获取自身包括padding、内容区的宽度，不包含边框
元素对象.clientHeight- - -获取自身包含padding。内容区的高度，不含边框

元素对象.scrollWidth- - -获取自身实际的宽度，不含边框
元素对象.scrollHeight- - -获取自身实际的高度，不含边框
元素对象.scrollTop- - -获取被卷上去的上侧距离
元素对象.scrollLeft- - -获取被卷上去的左侧距离

offset、client、scroll主要用法：

1. offset 经常用于获取元素位置- - -offsetLeft、offsetTop
2. client 经常用于获取元素大小- - -clientWidth、clientHeight
3. scroll 经常用于获取元素滚动距离- - -scrollTop、scrollLeft

注意：获取页面的滚动距离使用：window.pageXOffset