获取JS中元素的宽度未获得宽度的预期结果

Question

$(parentelement).find(".spec-table__thead.spec-table__thead--original th p").each((function(index, element) {
  console.log($(element))
  console.log($(element)[0].clientWidth)
  i.push($(element)[0].clientWidth)
}));

我有上面的代码和控制台 returns:

但是检查 $(element)

的内部

我能看到：

className: ""
clientHeight: 47
clientLeft: 0
clientTop: 0
clientWidth: 585
contentEditable: "inherit"

意味着我应该得到的值是 585 但为什么我得到 696

仅供参考：使用第一个条目作为样本。

Answer 1

其实这不是什么错误。它只是因为控制台减小了可视区域的宽度而发生了变化。如果将控制台移到底部，您会看到结果相同。

请注意，您控制台记录的 clientWidth 是正确的，即当控制台未打开时元素的可视部分的宽度，并且 clientWidth 出现在您控制台记录的元素中作为一个整体是控制台打开时的可视宽度。这就是为什么它比第一个少。

Answer 2

首先你需要检查哪个索引有clientWidth。因为您的回复不完整，所以我无法告诉您哪个索引具有有效值。检查索引像也许它在索引 1 或任何其他

$(parentelement).find(".spec-table__thead.spec-table__thead--original th p").each((function(index, element) {
  console.log($(element))
  console.log($(element)[1].clientWidth)
  i.push($(element)[1].clientWidth)
}));

Answer 3

我的猜测是您检查的元素与记录的元素不同 - 可能是填充的容器元素。 clientWidth 应该给你元素的宽度。

您可以仔细检查 boundingRect，但值肯定是相同的。

let boundingrect = element.getBoundingClientRect();
let clientWidth = element.clientWidth;
let boundingWidth = boundingrect.width;
let testWidth = boundingrect.right - boundingrect.left;
console.log(`client: ${clientWidth}, boundingwidth:${boundingWidth}, testWidth: ${testWidth}`);

Answer 4

事实证明 css 是在宽度上添加填充

获取JS中元素的宽度未获得宽度的预期结果

getting width of an element in JS not getting expected result for width

javascript

jquery

width