带有隐藏溢出子项的表格单元格的高度答案

【问题标题】：Height of table cell with hidden overflow child items带有隐藏溢出子项的表格单元格的高度
【发布时间】：2017-11-06 19:57:02
【问题描述】：

我想获取带有嵌套子项的表格单元格内容的真实高度，这些子项可能包含溢出：隐藏样式，如下所示：

<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>

JS代码：

console.log(document.getElementById("targetid").scrollHeight);
console.log(document.getElementById("innertargetdiv").scrollHeight);
console.log(document.getElementById("targetiddiv").scrollHeight);

输出： 51 50 100

如何从“#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]);
            };

【问题讨论】：

你有max-height: 50px，所以你会得到那个高度，假设在它之外没有空间占用。
是的，从#targetid 级别获得 100 高度的另一种方法？它也可能意味着克隆 dom 元素，操纵它的 css .. 表格的某些行肯定会有溢出的内容 ..
我也在考虑一个可能的递归解决方案，但上面发布的方法存在浮动元素的问题，因为如果 2 个兄弟姐妹正在流动并且高于 cod 的总和它们的高度，它不会显示父级的真实高度...我应该只接受垂直赌注的兄弟姐妹，不知道该怎么做
我想知道AngularJS是否可能是另一种方法，我可以在链接阶段获取DOM元素并在代码中绑定数据？

标签： javascript jquery html css angularjs

【解决方案1】：

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

const targetElm = document.getElementById('targetid')
const clonedElm = document.createElement('div')

clonedElm.setAttribute('id', 'clonedTarget')
clonedElm.style.visibility = 'hidden'
clonedElm.innerHTML = targetElm.innerHTML.replace(/target/g, 'clone')   	

const body = document.getElementsByTagName('body')[0]
body.append(clonedElm)
document.getElementById('cloneiddiv').style = ''

const height = document.getElementById('innerclonediv').scrollHeight
document.getElementById('clonedTarget').remove()

console.log(height)

<table>
 <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>
 </table>

【讨论】：

克隆元素是性能问题吗？还是可以接受？
如何更通用的方法呢？比如：innertargetdiv 有未知数量的子节点，每个子节点都可能嵌套了隐藏溢出内容的子节点，看看我在哪里得到这个？