clientHeight 属性是 Web 开发中常用的一个属性，它可以用来获取指定元素的可见高度。在本文中，我们将探讨如何使用 clientHeight 属性来获取元素的可见高度。

什么是 clientHeight 属性？

clientHeight 属性是一个 DOM（文档对象模型）属性，它返回指定元素的可见高度。换句话说，clientHeight 属性代表了一个 HTML 元素的内容高度和内边距高度的总和。

要使用 clientHeight 属性，我们需要首先获取要求的元素。可以使用以下代码获取一个元素：

```javascript

var element = document.getElementById("my-element");

```

这里，我们使用 document 对象中的 getElementById() 方法获取 id 为 "my-element" 的元素。

要获取该元素的可见高度，我们可以使用 clientHeight 属性：

```javascript

var elementHeight = element.clientHeight;

```

在此代码段中，我们将元素的 clientHeight 属性存储在变量 elementHeight 中。此变量现在包含有该元素的可见高度。

注意：如果想要获取元素的总高度，需要考虑边框和外边距。为此，需要将 clientHeight 属性与 offsetHeight 属性配合使用。

如何使用 clientHeight 属性获取可见高度？

clientHeight 属性只适用于没有滚动条的元素。如果元素具有滚动条，我们需要使用其他属性来获取其可见高度。

在以下示例中，我们将演示如何使用 clientHeight 属性获取可见高度。

HTML 代码如下：

```html