在前端开发中，我们经常需要计算页面元素的高度。但是，如果一个元素被裁剪了，我们可能无法直接获取它的完整高度。本文将介绍如何获取裁剪的div的全部高度。
裁剪的div
所谓裁剪，指的是当一个元素的内容超出其父元素的范围时，父元素会将其剪切或隐藏。HTML和CSS提供了多种方式来实现裁剪，如 overflow: hidden 和 text-overflow: ellipsis 等。
例如，下面的代码演示了如何使用 overflow: hidden 属性裁剪一个 div 元素：
-- -------------------- ---- -------
---- ---------------
---- --------------
---- ----- ---
------
------
-------
------- -
------ ------
------- ------
--------- -------
-
------ -
-- ----------- --
-
--------要获取裁剪的div的全部高度，我们需要借助一些技巧。以下是两种方法。
方法一：使用scrollHeight属性
每个DOM元素都有一个 scrollHeight 属性，它返回元素的内容高度，包括滚动的部分。因此，如果我们将一个裁剪的 div 的 scrollHeight 设置为其高度值，它就会展示全部内容。
下面是实现的代码：
const parent = document.querySelector('.parent');
const child = document.querySelector('.child');
parent.style.height = child.scrollHeight + 'px';该代码首先获取 parent 和 child 元素，然后将 parent 的高度设置为 child 的 scrollHeight。此时，parent 就可以完整地展示 child 的内容了。
方法二：使用cloneNode方法
另一种获取裁剪的div的全部高度的方法是使用 cloneNode 方法。这个方法会创建一个节点的副本，包括其子节点和属性。我们可以将裁剪的 div 的副本添加到页面中，并获取其完整高度。
下面是实现的代码：
-- -------------------- ---- ------- ----- ------ - ---------------------------------- ----- ----- - --------------------------------- ----- ----- - ---------------------- ------------------ - ------- -------------------------- ----- ------ - ------------------- -------------------------- --------------------
该代码首先获取 parent 和 child 元素，然后使用 cloneNode(true) 创建 child 的副本。接着，将副本的高度设置为 auto，并将其添加到 parent 中。此时，clone 的高度就等于它的内容高度了。最后，我们从 parent 中移除 clone。
指导意义
通过本文，我们学习了两种获取裁剪的div的全部高度的方法。这些技巧在实际开发中可能会用到，特别是当我们需要动态设置元素高度时。
尽管这些方法能够解决问题，但它们也有一些限制。例如，使用 scrollHeight 属性只适用于垂直滚动条，而不适用于水平滚动条。而使用 cloneNode 方法则需要将副本添加到页面上，可能会对性能产生影响。
因此，在实际开发中，我们需要根据具体情况选择合适的方法，并谨慎评估它们的性能表现。
示例代码
可前往 Codepen 查看示例代码：https://codepen.io/chatgpt/pen/qBjYOzO
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24582