前端怎么设置浏览器兼容（clientheight浏览器表达方式不同的差异及文档大小兼容问题）

clientHeight , scrollHeight , offsetHeight相信每个人都用过，可是每次用都要查一下到底哪个是文档大小哪个是视口大小，还有头疼的兼容问题，下面我们就来聊聊关于前端怎么设置浏览器兼容?接下来我们就一起去了解一下吧!

前端怎么设置浏览器兼容

clientHeight , scrollHeight , offsetHeight相信每个人都用过，可是每次用都要查一下到底哪个是文档大小哪个是视口大小，还有头疼的兼容问题。

先来官方的了解一下这三个属性：

clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小（经过实践取出来的大多是视口大小）

scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）

offsetHeight: 偏移量，包含元素在屏幕上所用的所有可见空间（包括所有的内边距滚动条和边框大小，不包括外边距，看起来解释很清晰，可是用起来好像没有这么容易啊，当然，各个浏览器的表达方式不同确实要背锅，不过，当用这些个属性的时候免不了要面对这两个东西的差异，document.body和document.documentElement，同样的属性用document.body和document.documentElemen表达出来可能会截然不同。

offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度，其中：

clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。