分清楚clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop并不难

RongEr99808
486 阅读5分钟

元素的clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop属性相信我们在项目里接触的不少，作为小白，刚开始接触傻傻分不清楚，每次遇到都要翻资料，很难分清楚具体的区别，知识点不难，但对我来说记忆。好吧，看来是不够认真，不自己总结永远记不住，那就总结一下，顺便加深自己的记忆，免得以后频繁查资料，相信大家看完这篇总结，一定不会被这几个属性迷惑了。

具体分为5大类：

  • clientHeight/clientWidth——可读

  • offsetHeight/offsetWidth——可读

  • offsetTop/offsetLeft——可读

  • scrollHeigth/scrollWidth——可读

  • scrollTop/scrollLeft——可读可写

接下来，我会通过自己对他们的认识来给不同的属性加以定义，同时图文并茂，相信看完这篇文章的你再也不备这几个属性烦恼了。因为的官网的定义太过官方，还是不利于记忆和区分。太难了。。。。

先给大家来个【查阅手册】：

1、clientHeight/clientWidth：元素padding以内（包括padding）的可见区域距离，不包括滚动条；

2、offsetHeight/offsetWidth：元素border以内（包括border）的可见区域距离，包括滚动条；

3、scrollHeigth/scrollWidth：元素border以内（包括border）的整体区域（可见区域+不可见区域）距离；

4、scrollTop/scrollLeft：在有滚动条时，滚动条向下/向右滚动的距离也就是元素顶部/左侧被遮住部分的距离；

5、offsetTop/offsetLeft：子元素的border-box左上角相对offsetParent定位父元素的content-box的偏移量；

以上定义应该是清晰明了的，相信大家看完定义已经可以在一定程度上区分它们的不同，如果你还是有疑问那就继续跟我走吧，相信看完下面的你会更加印象深刻，go~

实例分析阶段（有图）

		<div class="position-outer" style="position: relative">
			<div class="position-inner" style="position: relative">
				<div class="not-position">
					<div class="box1" style="position: fixed"></div>
				</div>
			</div>
		</div>

四个盒子（正方形）逐层包裹，最外层盒子Width/height:400px;从外向内递减100px，盒子右上角标注对应盒子的宽高，所有盒子的内边距都是padding:35px;边框都是border:15px;通过html可知第一层（最外层）盒子和第二层盒子都有position：relative的定位属性，第四层（最里层）有position：fixed的定位属性，第三层没有定位属性。实例的情况介绍完了，下面通过这个实例来看看具体的值。。

1、clientHeight/clientWidth

上面对这个属性的定义是元素padding以内（包括padding）的可见区域距离，不包括滚动条，如果用盒模型来解释这句定义就是 element.clientHeight = element.height(可见区域) + element.padding，为什么要强调可见区域？看到下面的scrollHeigth你就知道了。clientWidth同上。 1）没有滚动条的情况，实例中每层盒子的clientHeight如下：

2）有滚动条的情况（把第二层盒子的高度由300改为500，大于第一层的高度），实例中第一层的盒子的clientHeight如下：
可以看到第一层的盒子内部有了滚动条，计算的clientHeight由470px减少为453px，那么17px的距离及时滚动条自身的距离

2、offsetHeight/offsetWidth:

元素border以内的区域，因为滚动条占用的是padding的区域，所以自然包括滚动条，如果用盒模型来解释这句定义就是 element.clientHeight = element.height + element.padding + element.border 1）没有滚动条的情况，实例中每层盒子的offsetHeight如下：

2）有滚动条的情况，实例中第一层的盒子的offsetHeight如下：
通过以上结果验证了，不论有没有滚动条对offsetHeight/offsetWidth属性是不影响的，因为已经都包含在padding中。

3、scrollHeigth/scrollWidth:

因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中子元素有部分被隐藏了。所以scrollHeigth/scrollWidth代表元素padding以内的整体高度，当前可见部分高度+不可见部分的元素的高度，而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时，也就是子元素不存在滑动，此时元素scrollHeight==clientHeight恒成立。 1）没有滚动条的情况，实例中每层盒子的scrollHeigth如下：

2）有滚动条的情况，实例中第二层的盒子的scrollHeigth如下：
再次验证了scrollHeigth = element.Height + element.padding，即500px + 35*2px

4、scrollTop/scrollLeft 偏移量，代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。 可读可设置

顶部遮住的近似距离为 35px*2+15px 5、offsetTop/offsetLeft: 初始属性。要确定这两个属性的值，首先得确定元素的offsetParent。offsetParent指的是距该元素最近的position不为static的祖先元素，如果没有则指向body元素。确定了offsetParent，offsetLeft指的是元素偏移左侧offsetParent的距离，同理offsetTop指的的英文上侧偏移的距离。

注意两点：webkit内核、Firefox下的特殊情况：

1）element自身的display属性为none
		<div class="position-outer" style="position: relative">
			<div class="position-inner" style="position: relative">
				<div class="not-position" >
					<div class="box1" style="display:none"></div>
				</div>
			</div>
		</div>

2）element自身的position属性为fixed
		<div class="position-outer" style="position: relative">
			<div class="position-inner" style="position: relative">
				<div class="not-position" >
					<div class="box1" style="position: fixed"></div>
				</div>
			</div>
		</div>

可以看到以上这两种情况下，元素的offsetParent都不存在，要注意哦~ 那现在来看看具体的offsetTop是如何计算的，先看实例
总结一下：就是子元素border外边框到定位父元素padding外边框的距离，即offsetTop = child.margin + parent.padding。

好了关于属性总结完了，如有不正，希望指正，啦啦啦啦~

avatar
文章
阅读
粉丝