友情提示:本文共有 780 个字,阅读大概需要 2 分钟。
clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题。
先来官方的了解一下这三个属性:
clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小)
scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高度)
offsetHeight: 偏移量,包含元素在屏幕上所用的所有可见空间(包括所有的内边距滚动条和边框大小,不包括外边距,看起来解释很清晰,可是用起来好像没有这么容易啊,当然,各个浏览器的表达方式不同确实要背锅,不过,当用这些个属性的时候免不了要面对这两个东西的差异,document.body和document.documentElement,同样的属性用document.body和document.documentElemen表达出来可能会截然不同。
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下:
clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度,其中:
clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。
offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。
本文如果对你有帮助,请点赞收藏《clientheight浏览器表达方式不同的差异及文档大小兼容问题》,同时在此感谢原作者。