如何在JavaScript或jQuery中查找父元素宽度？

Question

我有这样的HTML代码 -

<div class="bs-example">
    <input type="text" id="typehead" style="width: 500px;" class="form-control" placeholder="accounts" />
    <input type="text" class="form-control" placeholder="accounts" />
</div>

我必须找到具有ID typehead的父元素的宽度.

所以在这种情况下,我必须找到具有类bs-example的div的宽度.

我不能在上部div中使用ID,因此我可以通过ID获得元素的宽度,因为我想要一个可重复使用的代码,因为它应该在页面中的许多位置使用.

我所做的是 -

function myFunction()
{
    var x = document.getElementById("myLI").parentNode.parentElement.width;
    document.getElementById("demo").innerHTML = x;
}

但它没有用.

Answer 1

您可以使用

function parentWidth(elem) {
    return elem.parentElement.clientWidth;
}
parentWidth(document.getElementById('typehead'));

请注意,如果使用参数调用它,它将抛出document.documentElement.如果你想让它返回undefined而不是扔,请使用parentNode而不是parentElement.

function parentWidth(elem) {
  return elem.parentElement.clientWidth;
}
alert(parentWidth(document.getElementById('typehead')) + 'px');

<div class="bs-example">
  <input type="text" id="typehead" style="width: 500px;" class="form-control" placeholder="accounts" />
  <br />
  <input type="text" class="form-control" placeholder="accounts" />
</div>

Answer 2

var x = $("#typehead").parent().width();

Answer 3

您可以使用clientWidth属性：

function myFunction() {
    var x = document.getElementById("myLI").parentNode.parentElement.clientWidth;
    document.getElementById("demo").innerHTML = x;
}

Orion 用户（谢谢）从对这篇文章的评论更新：

请注意，这将检索width中所使用的style内容属性，这可能不一样的计算width