HTML DOM clientHeight 属性详解

江湖人称“clientHeight”，至于它是啥，相信你也不会太陌生吧？没错，这家伙是HTML DOM（文档对象模型）中妥妥存在的一个千斤顶属性！

当你在开发网页时，不知道该如何判断一个元素的可见高度时，那就人性化地使用一下clientHeight吧！顾名思义，它表示的就是一个元素的可见高度，单位是像素（px）。

那么，这货有哪些常见的用法呢？我们来瞅瞅~

1. 获取可见高度

显而易见，clientHeight最基本的使用就是获取一个元素可见的高度。

比如我们有一个div元素：

这个div设置了高度为300px，超过高度部分会出现滚动条。那么，我们该如何获取这个div的可见高度呢？

使用JavaScript可以很轻松地获取：

var height=document.getElementById("myDiv").clientHeight;

这里，我们用JS通过id获取这个div元素的对象，然后用clientHeight获取它的可见高度，返回的单位是像素(px)。

再来看一个例子，我们实现一下一个常见的需求：当屏幕滚动到一定程度时，顶部标题栏渐显。我们先来假设，标题栏已经准备好了，且通过CSS设置了opacity为0（表示完全透明）。

然后，我们需要实现的JS逻辑大致分为两步：

松开鼠标或者触摸屏幕时，页面滚动到一定程度时，标题栏变得不透明

当页面恢复到顶部（即scrollTop=0）时，标题栏再变得透明

现在，我们需要获取页面滚动的高度，然后判断是否已经滚动到一定高度了，当满足条件时，改变标题栏的opacity值即可。代码如下：

window.onscroll = function(){

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

var opa = scrollTop/100;

document.getElementById("header").style.opacity = opa;

}

这里，我们绑定了一个onscroll事件，表示页面滚动时，触发的相关操作。然后，通过document.documentElement.scrollTop || document.body.scrollTop获取页面滚动的高度（跨浏览器处理）。

注：为什么要处理跨浏览器？因为不同的浏览器中，document.documentElement.scrollTop和document.body.scrollTop这两个对象的值不同，不能保证兼容性。

接着，我们把获取到的高度与100进行比较，得到透明度所对应的值，最后将标题栏的opacity属性赋值为这个值即可。

总结一下：

clientHeight = height + padding – 水平滚动条的高度（如果存在）

2. 获取元素内部的高度

除了上面提到的获取可见高度，clientHeight也可以用于获取一个元素内部所有DOM节点的高度之和。

var height = document.getElementById("myDiv").clientHeight;

var lineHeight = parseFloat(window.getComputedStyle(document.getElementById("myDiv")).getPropertyValue('line-height'));

var lineHeightSum = parseInt(height / lineHeight) +1;

到此，我们可以得到内部元素的行数，进而获取每一行的高度，从而得到内部元素的总高度。

在实际项目中，我们可以基于这个方法来自动计算评论框、聊天框等元素的高度，以适应不同屏幕的展示。

3. 不同box-sizing下的clientHeight计算

关于box-sizing的概念，相信各位同学都不会太陌生吧。在CSS3中，新增了一个属性——box-sizing，用于控制元素大小的计算方式。其默认值为content-box。

既然涉及到box-sizing，那么clientHeight属性计算时，也会受其影响。

当box-sizing为content-box时：

clientHeight = height + padding - 内部滚动条的高度（如果存在）

IE9+、Firefox、Chrome、Opera、Safari支持

当box-sizing为border-box时：

clientHeight = height

IE9+、Firefox、Chrome、Opera、Safari支持

那么，我们该如何快速简单地检测box-sizing属性呢？

我们可以通过CSS选择器控制：若box-sizing为border-box，则把元素的高度设置为100%会让它填充整个父元素。

比如：box-sizing: border-box; height: 100%;

那么，一篇详细介绍了HTML DOM clientHeight属性的文章，总计有 1300 字。相信我，只有把它搞明白了，才能让你在实现各种需求时信心百倍哦！ www.0574web.net 宁波海美seo网络优化公司 是网页设计制作，网站优化，企业关键词排名，网络营销知识和开发爱好者的一站式目的地，提供丰富的信息、资源和工具来帮助用户创建令人惊叹的实用网站。 该平台致力于提供实用、相关和最新的内容，这使其成为初学者和经验丰富的专业人士的宝贵资源。