用javascript表格行的高度

Question

如何使用javascript获取表格行的高度？

Answer 1

function findHeights() {
            var tbl = document.getElementById('your table').rows;
            alert(tbl[0].offsetHeight); // row 1
}

Answer 2

document.getElementById('your_row_id').offsetHeight;

Answer 3

如果您想获得准确的表格行高，那么您应该使用Element.getBoundingClientRect()而不是Element.offsetHeight为了获得分数高度而不是四舍五入的数字。

document.querySelector('tr').getBoundingClientRect().height;

如果您还想计算border-spacing表行高，则需要决定如何将其分配给每行（因为它实际上是行之间的空间，而不是任何特定行的一部分）。另外，请务必检查表的属性是否border-collapse设置为collapse（如果是，则不border-spacing包含在您的表中）。

在下面的代码片段中，第一行/最后一行分配了上方/下方的空间，不与另一行共享，行之间的所有空间均匀共享。这可确保所有行高的总和等于表格高度。

或者，您可以选择不将第一行上方或最后一行下方的空间分配给任何行，因为此空间不包含在<thead>或<tbody>元素的高度计算中，因此可以将空间分配给这些元素而不是行本身。

document.querySelector('tr').getBoundingClientRect().height;

// example log output comments below will change based on browser defaults, zoom, etc
const getRowHeight = (tr) => {
  const table = tr.closest('table');
  const style = window.getComputedStyle(table);
  const collapse = style.getPropertyValue('border-collapse');
  const space = parseFloat(
    style.getPropertyValue('border-spacing').split(' ')[1].replace(/[^\d.]/g, '')
  );
  
  let height = tr.getBoundingClientRect().height;
  if (collapse === 'separate') {
    if (table.rows.length === 1) {
      height += space * 2;
    } else if (tr.rowIndex === 0 || tr.rowIndex === table.rows.length - 1) {
      height += space + space / 2;
    } else {
      height += space;
    }
  }
  
  return height;
};

console.log(getRowHeight(document.querySelector('#single')));
// 24 (20px row height + 2px space above + 2px space below)

console.log(getRowHeight(document.querySelector('#top')));
// 23 (20px row height + 2px space above + 1px space below)

console.log(getRowHeight(document.querySelector('#middle')));
// 22 (20px row height + 1px space above + 1px space below)

console.log(getRowHeight(document.querySelector('#bottom')));
// 23 (20px row height + 1px space above + 2px space below)

Answer 4

我做了一些计算。

1. 获取总高度值
2. 获得padding-top价值
3. 获得padding-bottom价值
4. 获得margin-top价值
5. 获得margin-bottom价值
6. 获得border-space价值

现在有了所有这些信息，我们就可以减去填充，边缘和边框空间的总高度和负值。

我已经在代码中注释了每一行的功能。

var elmnt = document.getElementsByTagName("td")[0];
var totalHeight = elmnt.offsetHeight; // gets the total height value inclusive of all paddings & margins

// The following is to get the padding-top, padding-bottom, margin-top, margin-bottom values
var paddedHeightTop = window.getComputedStyle(elmnt, null).getPropertyValue('padding-top');
var paddedHeightBottom = window.getComputedStyle(elmnt, null).getPropertyValue('padding-bottom');
var marginHeightTop = window.getComputedStyle(elmnt, null).getPropertyValue('margin-top');
var marginHeightBottom = window.getComputedStyle(elmnt, null).getPropertyValue('margin-bottom');
var borderHeight = window.getComputedStyle(elmnt, null).getPropertyValue('-webkit-border-vertical-spacing');


// To remove the px from the string so we can use it as an integer to subtract from total value.
var newPaddedHeightTop = paddedHeightTop.substring(0, paddedHeightTop.length - 2); // remove the px
var newPaddedHeightBottom = paddedHeightBottom.substring(0, paddedHeightBottom.length - 2); // remove the px
var newMarginHeightTop = marginHeightTop.substring(0, marginHeightTop.length - 2); // remove the px
var newMarginHeightBottom = marginHeightBottom.substring(0, marginHeightBottom.length - 2); // remove the px
var newBorderHeight = borderHeight.substring(0, marginHeightBottom.length - 2); // remove the px

// Take the total and minus of all these paddings, margins and border-space
var finalHeight = totalHeight - newPaddedHeightTop - newPaddedHeightBottom - newMarginHeightTop - newMarginHeightBottom - newBorderHeight;

alert(totalHeight + " (total height) - " + newPaddedHeightTop + " (padding-top) - " + newPaddedHeightBottom +  " (padding-bottom) - " + newMarginHeightTop + " (margin-top) - " + newMarginHeightBottom + " (margin-bottom) - " + newBorderHeight + " (border-space) = "  + finalHeight);

td {
  height: 50px;
  padding: 2px;
  border-spacing: 2px 3px;
}

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

<pre></pre>

我添加了css，只是为了让您看到它确实减去了所有填充值，并给出了的确切高度td。

更新1：为添加了计算border-space。

var borderHeight = window.getComputedStyle(elmnt, null).getPropertyValue('-webkit-border-vertical-spacing');

另外，如注释中所述，window.getComputedStyle(elmnt, null).getPropertyValue('-webkit-border-vertical-spacing')获取的值以像素为单位，因此即使以百分比设置，它也会检索其像素值。

因此，从中我们几乎可以得到height的总值，然后减去所有的填充，边距和边界空间。