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.

Answer 1

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>