Javascript 具有隐藏溢出子项的表单元格的高度

我想获得具有嵌套子项的表单元格内容的实际高度，这些子项可能包含overflow:hidden样式，如下所示：

<tr>
    <td id="targetid">
        <div id="innertargetdiv">
            <div id="targetiddiv" style="overflow:hidden; max-height:50px;">
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
            </div>
        </div>
    </td>
    <td>Smith</td>
    <td>50</td>
  </tr>

输出： 51 50 一百

如何从targetid级别获取完整高度？ 我不想让内容填满整个单元格，我只想知道整个高度。AngularJS/JQuery也是选项

问题的可能递归解决方案：

var totalHeight: (any) => number = (e) => {
                var eHeight = 0;

                if (e.hasChildNodes()) {
                    eHeight = $.map(e.children, (child) => totalHeight(child))
                        .reduce((sum: number, value: number) => sum + value, 0);
                }

                //The height of the child elements might be smaller than the element with padding
                return Math.max.apply(Math, [eHeight, e.scrollHeight]);
            };

---

根据您的评论，下面是一个克隆元素的示例

const targetElm=document.getElementById'targetid' const clonedElm=document.createElement'div' setAttribute'id'，'clonedTarget' clonedElm.style.visibility='hidden' clonedElm.innerHTML=targetElm.innerHTML.replace/target/g，“克隆” const body=document.getElementsByTagName'body'[0] 克隆榆体 document.getElementById'cloneiddiv'。样式= const height=document.getElementById'innerclonediv'.scrollHeight document.getElementById'clonedTarget'。删除 控制台高度 这个细胞 这个细胞 这个细胞 这个细胞 这个细胞 这个细胞 这个细胞 这个细胞 这个细胞 这个细胞 史密斯 50

---

你有最大高度：50px，所以你会得到这个高度，假设没有空间被占用。是的，另一种从targetid级别得到100高度的方法？它还可能意味着克隆dom元素，操纵其css。。表中的某些行肯定会有溢出的内容。我也在考虑一个可能的递归解决方案，但上面发布的方法在浮动元素方面存在问题，因为如果两个同级在流动，并且高于它们的cod总和，则不会显示父级的真实高度。。。我应该只带垂直标记的兄弟姐妹，不知道如何做我想知道AngularJS是否是另一种方法，我可以在链接阶段获得DOM元素并在代码中绑定数据？克隆元素，这是性能问题吗？或者可以接受吗？那么更通用的方法呢？like:innertargetdiv有未知数量的子节点，每个子节点都可能有嵌套的子节点，这些子节点都有隐藏的溢出内容，看到了吗？

var totalHeight: (any) => number = (e) => {
                var eHeight = 0;

                if (e.hasChildNodes()) {
                    eHeight = $.map(e.children, (child) => totalHeight(child))
                        .reduce((sum: number, value: number) => sum + value, 0);
                }

                //The height of the child elements might be smaller than the element with padding
                return Math.max.apply(Math, [eHeight, e.scrollHeight]);
            };