每次看到js中的clientHeight(clientTop),offsetHeight(offsetTop),scrollHeight(scrollTop)，我的头都大了，分不清这几种类型在全部。这些不值得一次或两次，然后在决定使用哪个之前每次都必须查看差异。今天我花了一点时间来理清它们之间的区别。本文主要基于chrome。浏览器之间可能还是有些区别的，但是很多都没有真正遇到过，也不是很清楚。我稍后会见他们。我也遇到过类似的兼容性问题，这里再记录一下。这次把chrome浏览器中各种属性的区别做一个记录，方便以后查看。clientHeight、offsetHeight、scrollHeight的区别 clientHeight在各个浏览器中基本是一样的，约定为内容可见区域的高度，也就是说，在页面浏览器中可以看到内容的区域的高度，不包括滚动条，不包括margin，但是包括padding，也就是说实际的clientHeight=对象当前可见区域的高度+padding值，如下图所示clientHeight=对象可见区域的高度（300）+上下padding值（20）=320文档元素.clientWidth||document.body.clientWidth;varh=document.documentElement.clientHeight||文档.body.clientHeight； offsetHeight=当前对象的高度+滚动条+borde值+padding值，上图中当前对象的高度与可视区域的高度相同，所以offsetHeight=300+padding(20px)+边框(10px)=330 scrollHeight是网页内容的实际高度，最小值是clientHeight，也就是说可以等于clientHeight，但是我们假设这样一种情况，如下代码所示，父div的高度为300px，而子div的高度为500px，此时会形成一个滚动条。此时父div的结构图如下： 父div的scrollHeight应该是scrollHeight=500px+paddingvalue 因为此时会生成一个滚动条，可见区域的此时父div的高度为283，当前对象的高度为父div的高度为300，所以clientHeight=283px+paddingvalue(20px)=303pxoffsetHeight=父div的高度(300px)+填充值(20px)+边框(10px)=330px
