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

我有一个类似这样的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>

但它不起作用。

您可以使用属性：

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

更新人（谢谢）从对本帖的评论中：

---

注意：这将检索

样式

内容属性中使用的

宽度

，该属性可能与计算的

宽度

你可以用

函数父宽度（elem）{
返回elem.parentElement.clientWidth；
}
parentWidth（document.getElementById（'typehead'）；

请注意，如果使用参数

document.documentElement

调用它，它将抛出。如果希望它返回

undefined

而不是抛出，请使用

parentNode

而不是

parentElement

函数父宽度（elem）{
返回elem.parentElement.clientWidth；
}
警报（parentWidth（document.getElementById（'typehead'））+'px'）



下面是一个使用JQuery的整洁示例：


函数GetParentDivWidth（选择器）{
返回$（选择器）.parent（“div”）.width（）；
}
$（函数（）{
警报（GetParentDivWidth（“子”）；
});

警告“100”
如果您想要一个通用函数，您可以使用传递元素作为参数进行检查，并使用jQuery
最接近的
和
宽度

代码：

演示：
您忘记了样式属性…而不是.width use.style.width。您能详细回答我吗？因为我是新来的，我听不懂你说的话。你为什么同时使用
parentNode
和
parentElement
，而
#myLI
在哪里，你说父元素有ID
字体是什么意思，这是一个输入，它没有子元素？这一切都很不清楚？注意，这将检索
样式
内容属性中使用的
宽度
，它可能与计算的
宽度
不同。这需要jQuery
function myFunction() {
    var x = document.getElementById("myLI").parentNode.parentElement.clientWidth;
    document.getElementById("demo").innerHTML = x;
}

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

<div style="width: 100px;">
    <div style="width: 50px;" id="child">
    </div>
</div>

function GetParentDivWidth(selector){
    return $(selector).parent("div").width();
}

$(function(){
   alert(GetParentDivWidth("#child"));
});

function myFunction($el) {
    return $el.closest('div.bs-example').width();
}