我们开发web代码的时候,经常会遇到各种各样的高级计算.总是会忘记几个人的不同,所以每次都要查,这次在这篇文章中我彻底理解了这些长度的不同.
1 .定义条目含义的图标clientHeight元素的像素高度。 包含元素高度的内部边距,不包含水平滚动条,边框和外部边距距offsetHeight元素的像素高度包含元素的垂直内部边距和边框以及水平滚动条的高度,是整数scrollHeight 包含溢出不可见内容的offsetLeft返回元素左上角相对于offsetParent左边距的偏移像素值。 注意事项offsetTop、offsetLeft、offsetWidth和offsetHeight相对于ofsetparent描述元素的边界框。 但是,文本框并不是这样。 文本框的offsetLeft和offsetTop是第一个文本框的左偏移和上偏移。
2.offsetParent元素是指改变元素位置的元素,以及最近的table,td,th,body.
因此,offsetParent和position属性的包含块概念类似,在大部分场景中是通用的。
3.offsetTop和offsetLeft均针对其内边距边界。
offsetLeft和left属性之间的差异1.position为fixed时值不同
如果position为fixed,则offsetLeft的值为null,但left通常包含.2.相对边距不同
offerset是offsetParent的内部边距边界,而left是包含块的外部边距边界.3.包含块有区别
offerset只针对定位的祖先元素或table/td/th/body等祖先元素,而left只针对定位的祖先元素body
clientHeight和offsetHeight的区别clientHeight只包含内部边距的高度,而offsetHeight包含内部边距滚动条的边框
所以可以说: clientHeight滚动条高度的边框=offsetHeight
参考资料: 1.offsetHeight官方说明
3359 developer.Mozilla.org/zh-cn/docs/web/API/html element/offsetheight
2.clientHeight官方说明
3359 developer.Mozilla.org/zh-cn/docs/web/API/element/clientheight