在JS中获取元素的宽度没有得到宽度的预期结果答案

【问题标题】：getting width of an element in JS not getting expected result for width在JS中获取元素的宽度没有得到宽度的预期结果
【发布时间】：2021-04-25 17:05:37
【问题描述】：

$(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)
}));

我有上面的代码，控制台返回：

但是在检查$(element)的内部时

我可以看到：

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

我应该得到的意思是 585 但为什么我得到 696

仅供参考：使用第一个条目作为示例。

【问题讨论】：

您应该为您的问题创建一个 sn-p。目前，我们只能猜测。
您使用的是哪个版本的 jQuery？
jQuery JavaScript 库 v3.2.1 @Riccardo

标签： javascript jquery width

【解决方案1】：

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

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

【讨论】：

实际上我使用分离的开发工具结果是一样的..我认为这与它无关？
我检查了它并且在我的情况下也是相同的，即不同的结果但是当我将控制台移到底部时，结果现在是相同的。那是唯一改变它的东西。在您的情况下，这可能是其他一些问题。您应该在包含这些元素的问题中添加一些代码。
我明白了，让我试试换到底部看看
正如我所说，这是为我解决的问题，而且您的代码似乎很完美，因为没有使用逻辑或任何其他东西。您只是想获得一个 attr 值，因此它不能有错误。

【解决方案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)
}));

【讨论】：

我在 OP 上没有看到任何差异，我无法找到任何人

【解决方案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}`);

【讨论】：

【解决方案4】：

原来 css 在宽度上添加了填充

【讨论】：