web-dev-qa-db-ja.com

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>

IDtypeheadを持つ親要素の幅を見つける必要があります。

したがって、この場合、クラスbs-exampleを持つdivの幅を見つける必要があります。

IDで要素の幅を取得できるように、上のdivで[〜＃〜] id [〜＃〜]を使用できませんページ内の多くの場所で使用する必要があるため、再利用可能なコードが必要だからです。

私がやったことは-

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

しかし、それは機能していません。

javascriptjquerycsshtml5css3
15
Abrar Jahin
var x = $("#typehead").parent().width();
14
Balaji Viswanath

使用できます

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>
22
Oriol

clientWidth プロパティを使用できます：

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

以下は、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"));
});

アラート「100」

1
Dhunt

汎用関数が必要な場合は、要素を渡してパラメーターとして確認し、jQuery closestおよびwidthを使用できます。

コード：

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

デモ： http://jsfiddle.net/f07uanoh/

0
Irvin Dominin