JQuery 元素高度在现实中不一样答案

【问题标题】：JQuery Element Hieght not the same on realityJQuery 元素高度在现实中不一样
【发布时间】：2020-11-12 17:32:46
【问题描述】：

我有一个 datatable.js，我尝试限制它的高度，在一个特定的行号上，比如 4.5 行，但是我在行高 (tr height) 上有问题，例如我使用 maxDisplayedRow = 这个方法得到 5 行5：

function getRows(maxDisplayedRow) {
    return $("#productDesignedFor-table tbody tr:lt("+maxDisplayedRow+")").toArray();
}

我试图用 :

计算它

with rows = getRows() 方法和 maxRows = 5

如果表上有 5 行，我将其减少以计算所有行高的 4.5

function getTableHeightWithLastRowIsHalf(rows, maxRows) {

return tableHeight = rows.length === maxRows
            ? rows.reduce(function(acc, row, i) {
                console.log(row.scrollHeight)
                console.log({row: row})
                const rowHeight = $(row).height();
                return i !== maxRows - 1
                    ? acc + rowHeight 
                    : acc + rowHeight/2;
            }, 0)
            : false;
}

我在设置上调用这个方法：

initComplete: () => {
const maxDisplayedRow = getMaxDisplayedRow(); // = 5
const rows = getRows(maxDisplayedRow) // all rows less than 5 = [row].length < 5

$('.dataTables_scrollBody').css("max-height", getTableHeightWithLastRowIsHalf(rows, maxDisplayedRow));
}

所有这些功能都在 $(document).ready()

问题是：

当我控制台日志console.log($(row).height()) 它给了我：59

但console.log($(row)) 有 79 个

即使row.scrollHeight row.clientHeight

我在函数 juste 上尝试了 setTimeOut，以防所有 css 和 html 都应用但没有结果。

问题是：

为什么同一个对象会给出不同的结果，因为这会导致计算问题？

【问题讨论】：

标签： javascript html jquery datatables

【解决方案1】：

我找到了，它是应用高度后添加的滚动条，有些列会根据进入下一行的文本而采用新的高度。

【讨论】：