三大系列 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调用,那么代表,页面被卷去的头部或者左侧部分;
如果是盒子调用,那么代表,该盒子遮挡住子盒子的左侧和顶部部分;

   





posted @ 2021-05-06 16:08  kathy2010  阅读(59)  评论(0编辑  收藏  举报