三大系列 offset client scroll 的区别
1. offset系列
offsetWidth = width + padding + border
offsetHeight = height + padding + border
offsetTop 和 offsetLeft: 检测盒子距离父系盒子中带有定位的盒子的距离。如果没有默认找距离body的距离
和自己有没有定位无关,之和父系盒子中带有定位的盒子有关。
注意点:1.用处最多的地方还是子绝父相 2.如果没有定位就是距离整个页面的距离
2. client系列
clientWidth/clientHeight = width/height + padding
获取盒子的宽高;不包括border而且不会被内容撑开;
调用者是一个dom元素;该元素的宽高;
调用者是body/html ;浏览器可视区域的宽高
3. scroll 系列
scrollWidth/scrollHeight = width/height + padding 会受到内容影响,如果内容超出盒子,则以内容为准(火狐、谷歌、 IE9+)
scrollLeft/scrollTop : 是检测被遮挡住的部分;
如果是body/html调用,那么代表,页面被卷去的头部或者左侧部分;
如果是盒子调用,那么代表,该盒子遮挡住子盒子的左侧和顶部部分;