clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案2

摘要

clientHeight , scrollHeight , offsetHeight相信每个人都用过，可是每次用都要查一下到底哪个是文档大小哪个是视口大小，还有头疼的兼容问题。先来官方的了解一下这三个属性：clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小（经过实践取出来的大多是视口大小）scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）offsetHeight: 偏移量，包含元素在屏幕上所用的所有可见空间（包括所有的内边距滚动条和边框大小，不包括外边距看起来解释很清晰，可是用起来好像没有这么容易啊，当然，各个浏览器的表达方式不同确实要背锅，不过，当用这些个属性的时候免不了要面对这两个东西的差异，body和documentElement，同样的属性用body和documentElemen表达出来可能会截然不同。documentElement 和 body 相关说明： body是DOM对象里的body子节点，即标签；documentElement 是整个节点树的根节点root，即标签；DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中可以写：body。除了documentElement，body在浏览器下表现方式的不同和各个浏览器对这三个属性的解释不同，ie下的混杂模式和标准模式也来插了一脚。

关键词