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 ，而不是普通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的头部添加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)

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

3 个答案: