如何在 JavaScript 或 jQuery 中查找父元素宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28257589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to find a parent element width in JavaScript or jQuery?
提问by Abrar Jahin
I have a HTMLcode like this -
我有一个这样的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>
I have to find the width of the parent element having ID typehead.
我必须找到具有 ID typehead的父元素的宽度。
So in this case I have to find width of the div having class bs-example.
所以在这种情况下，我必须找到具有类bs-example的 div 的宽度。
I can't use IDin the upper div so that I can have the width of the element by ID because I want a re-usable code because it should be used many places in the page.
我不能在上面的 div 中使用ID以便我可以通过 ID 获得元素的宽度，因为我想要一个可重用的代码，因为它应该在页面中的很多地方使用。
What I have done is -
我所做的是——
function myFunction()
{
var x = document.getElementById("myLI").parentNode.parentElement.width;
document.getElementById("demo").innerHTML = x;
}
But it is not working.
但它不起作用。
采纳答案by Balaji Viswanath
var x = $("#typehead").parent().width();
回答by Oriol
You can use
您可以使用
function parentWidth(elem) {
return elem.parentElement.clientWidth;
}
parentWidth(document.getElementById('typehead'));
Note that it will throw if you call it with the argument document.documentElement. If you want it to return undefinedinstead of throwing, use parentNodeinstead of parentElement.
请注意，如果您使用参数调用它，它将抛出异常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>回答by Sharikov Vladislav
You can use clientWidthproperty:
您可以使用clientWidth属性：
function myFunction() {
var x = document.getElementById("myLI").parentNode.parentElement.clientWidth;
document.getElementById("demo").innerHTML = x;
}
回答by Dhunt
Here is a tidier example using JQuery: http://jsfiddle.net/srfqko8r/3/
这是一个使用 JQuery 的更简洁的示例：http: //jsfiddle.net/srfqko8r/3/
<div style="width: 100px;">
<div style="width: 50px;" id="child">
</div>
</div>
function GetParentDivWidth(selector){
return $(selector).parent("div").width();
}
$(function(){
alert(GetParentDivWidth("#child"));
});
Alerts "100"
警报“100”
回答by Irvin Dominin
If you want a generic function you can use pass the element to check as parameter and use jQuery closestand width.
如果你想要一个泛型函数，你可以使用传递元素作为参数进行检查并使用 jQueryclosest和width.
Code:
代码：
function myFunction($el) {
return $el.closest('div.bs-example').width();
}
