How to find a parent element width in JavaScript or jQuery?

Question

I have a HTML code like this -

<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.

So in this case I have to find width of the div having class bs-example.

I can't use ID in 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.

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.

You're forgetting style property....instead of .width use .style.width — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Jan 31, 2015 at 23:12
Can you please give me a answer in detail ? Because I am new and I can't understand your word. — S M Abrar Jahin
– S M Abrar Jahin, Commented Jan 31, 2015 at 23:13
Why are you using both parentNode and parentElement, and where is #myLI, and what do you mean by the parent element having ID typehead, that's an input, it has no children? This is just all very unclear? — adeneo
– adeneo, Commented Jan 31, 2015 at 23:17

Oriol · Accepted Answer · 2015-01-31 23:17:33Z

41

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 undefined instead of throwing, use parentNode instead of 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>

answered Jan 31, 2015 at 23:17

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Balaji Viswanath · Accepted Answer · 2015-01-31 23:17:26Z

22

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

answered Jan 31, 2015 at 23:17

Balaji Viswanath

1,6841 gold badge12 silver badges20 bronze badges

1 Comment

Anatolii Humennyi Over a year ago

This requires jQuery

Sharikov Vladislav · Accepted Answer · 2021-03-29 14:26:43Z

12

You can use clientWidth property:

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

Update by Orion user (thank you) from the comments to this post:

Note this will retrieve the width used in the style content attribute, which may not be the same as the computed width

edited Mar 29, 2021 at 14:26

answered Jan 31, 2015 at 23:13

Sharikov Vladislav

7,2999 gold badges53 silver badges92 bronze badges

1 Comment

Oriol Over a year ago

Note this will retrieve the width used in the style content attribute, which may not be the same as the computed width.

Irvin Dominin · Accepted Answer · 2015-01-31 23:22:57Z

1

If you want a generic function you can use pass the element to check as parameter and use jQuery closest and width.

Code:

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

Demo: http://jsfiddle.net/f07uanoh/

answered Jan 31, 2015 at 23:22

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

Comments

Dhunt · Accepted Answer · 2018-09-26 12:33:06Z

1

Here is a tidier example using 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"

edited Sep 26, 2018 at 12:33

answered Jan 31, 2015 at 23:18

Dhunt

1,5949 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to find a parent element width in JavaScript or jQuery?

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related