clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop、offsetParent

文章目录

• 1、clientHeight
• 2、offsetHeight
• 3、scrollHeight

1、clientHeight

1. 获取元素的可见高度，包括 padding, 不包括 margin , border , 和滚动条。
2. clientHeight 和 clientWidth 都是不带 px 的，返回都是一个数字，可以直接计算

2、offsetHeight

3. 获取元素的整个的大小，整个的高度和宽度，包括内容区、padding 、 border 和 滚动条, 不包括 margin
   

3、scrollHeight

1. 当本元素的子元素比本元素高且overflow=scroll时，本元素会scroll
2. scrollHeight 返回整个元素的高度（包括带滚动条的隐蔽的地方）
3. 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeigh t代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight，也就是 scrollHeight>=clientHeight 恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时 scrollHeight==clientHeight 恒成立。