如何通过DOM获取JavaScript中表头单元格的宽度？

Question

我可以访问temp1.$el中的这个DOM节点。

以下是上述变量的内容：

<table id="__BVID__730" aria-busy="false" aria-colcount="10" aria-rowcount="14" class="table b-table table-striped table-hover">
    <thead class="thead-class-hidden">
        <tr>
            <th aria-colindex="1" class="">
                <div style="white-space: nowrap;">
                    Header1 Name
                </div>
            </th>
            <th aria-colindex="2" class="">
                <div style="white-space: nowrap;">
                    Header2 Name
                </div>
            </th>
        </tr>
    </thead>
    <tbody class="">
        <tr class="">
            <td aria-colindex="1" class="">
                <div style="white-space: nowrap;">
                    Row1 Column1 Value
                </div>
            </td>
            <td aria-colindex="2" class="">
                <div style="white-space: nowrap;">
                    Row1 Column2 Value
                </div>
            </td>
        </tr>
    </tbody>
</table>

我正在使用纯JavaScript，我需要得到的是元素的宽度：

 table thead tr th (child-1)
 table thead tr th (child-2)

我尝试过很多东西：

temp1.$el.tHead.firstElementChild.children[0].offsetWidth
temp1.$el.tHead.firstElementChild.children[0].clientWidth    
temp1.$el.tHead.firstElementChild.children[0].firstElementChild.offsetWidth
temp1.$el.tHead.firstElementChild.children[0].firstElementChild.clientWidth

但他们都没有工作。 table thead tr th宽度取决于它们内部的实际内容，我需要获取宽度，然后将它们应用于不同的表。

我设法让他们到变量temp1.$el，但从这里，我无法成功获得我需要的宽度。

Answer 1

您可以使用ParentNode属性children完成此操作。

ParentNode属性children是一个只读属性，它返回一个实时HTMLCollection，其中包含调用它的节点的所有子elements。

var element = document.getElementById('__BVID__730');
console.log(element.tHead.children[0].children[0].offsetWidth)

<table id="__BVID__730" aria-busy="false" aria-colcount="10" aria-rowcount="14" class="table b-table table-striped table-hover">
    <thead class="thead-class-hidden">
        <tr>
            <th aria-colindex="1" class="">
                <div style="white-space: nowrap;">
                    Header1 Name
                </div>
            </th>
            <th aria-colindex="2" class="">
                <div style="white-space: nowrap;">
                    Header2 Name
                </div>
            </th>
        </tr>
    </thead>
    <tbody class="">
        <tr class="">
            <td aria-colindex="1" class="">
                <div style="white-space: nowrap;">
                    Row1 Column1 Value
                </div>
            </td>
            <td aria-colindex="2" class="">
                <div style="white-space: nowrap;">
                    Row1 Column2 Value
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 2

$ el究竟是什么？这看起来像jQuery，而不是vanilla js。

根据您的代码。

// Table
// Or querySelector('table') if you have only one
const table = document.getElementById("__BVID__730"); 
console.log(table.clientWidth);

// Thead & Tbody
const thead = table.querySelector("thead");
const tbody = table.querySelector("tbody");
console.log(thead.clientWidth);
console.log(tbody.clientWidth);

// Tr th
const theadColumns = thead.querySelectorAll("tr th");
if (theadColumns) {
  console.log(theadColumns[0]);
  console.log(theadColumns[1]);

  // OR
  theadColumns.forEach(column => console.log(column.clientWidth));
}

Answer 3

这是获得第一个宽度的工作演示（使用的jQuery 1.8.3）：

http://jsfiddle.net/7dg5bvou/

这也可以帮助您解决问题：首先在HTML的head部分包含jQuery库。

temp1.$el.find("table[id='__BVID__730']").find(".thead-class-hidden").children("tr:first-child").children("th:first-child").width();

你也可以使用"eq"找到各自的元素：td:eq(1)