offsetParent

如果当前元素的style.position=fixed或者style.display=none，那么offsetParent=null
如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），那么offsetParent=body
如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个定位父级元素

offsetLeft

当前元素左上角相对于 offsetParent 节点的左边界偏移的像素值
也就是说：
当前元素的offsetLeft = offsetParent元素的padding-left + 中间元素的offsetWidth + 当前元素的margin-left

  <style>html, body {margin: 0;}.father {position: relative;width: 300px;height: 300px;background: rgb(230, 215, 5);margin: 100px;box-sizing: border-box;padding: 50px;}.child {width: 100px;height: 100px;background: rgb(17, 152, 206);margin-left: 10px;/* display: none; *//* position: fixed; */}</style>
<body><div class="father"><div class="child"></div></div>
</body>
<script>const fatherDom = document.querySelector('.father')const childDom = document.querySelector('.child')const childOffsetParent = childDom.offsetParentconst childOffsetLeft = childDom.offsetLeftconsole.log(childOffsetParent) // fatherconsole.log(childOffsetLeft)  // 60</script>

offsetWidth

元素本身宽度 + 元素的paddingLeft + 元素的paddingRight + 元素的borderLeft + 元素的borderRight

clientWidth

元素本身宽度 + 元素的paddingLeft + 元素的paddingRight - 水平滚动条高度 (如果存在)

判断是否滚到底部

元素的scrollHeight <= 元素的scrollTop + 元素的clientHeight

offsetParent, offsetLeft, offsetWidth, clientWidth相关推荐

offsetwidth/clientwidth的区别
offsetwidth/clientwidth的区别 clientWidth是对象看到的宽度(不含边线,即border) scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间 ...
offsetX,offsetLeft,offsetWidth的区别详解
offsetX,offsetLeft,offsetWidth的区别 offsetX/offsetY offsetX和offsetY表示(鼠标位置)相对于最近父级元素的坐标(无论父级是否定位)(不管是谁 ...
JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset
value description offsetWidth 返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) offsetHeight 返回元素的高度(包括元素高度.内边距和边框,不包括外边 ...
offsetLeft,offsetWidth,offsetX,
1.offsetLeft:离最近一个带定位父盒子的left距离,通过offsetParent可查看该定位父盒子,如果没有的话,就默认是body 2.offsetWidth: 水平方向 width + ...
HTMLElement属性：offsetParent,offsetLeft,offsetTop
HTMLElement.offsetParent - Web API 接口参考 | MDN HTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(指包含层级上的最近)包 ...
[绍棠] scrollWidth,clientWidth,offsetWidth的区别
说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. ...
clientWidth offsetWidth innerWidth 区别(窗口尺寸汇总）
原文链接:http://www.cnblogs.com/youxin/archive/2012/09/21/2697514.html scrollWidth 是对象的实际内容的宽,不包边线宽度,会随 ...
offsetWidth、clientWidth、scrollWidth 的区别
offsetWidth clientWidth scrollWidth 相同之处都是返回元素大小 element.offsetWidth 返回自身包括padding.边框.内容区的宽度,返回数值不带 ...
clientWidth offsetWidth的区别
记录js中一些计算元素宽高相关的属性和方法,理解各属性之间的区别及应用场景. clientWidth/clientHeight 内容区域的宽度/高度,不包括边框border的宽度,含padding宽度 ...

offsetParent, offsetLeft, offsetWidth, clientWidth