Get width of an element without jquery

Question

Nevermind this, i did it the oldschool way with counting elements.

I have a few div's inside a main div. Now the top div has a set width, but it's inside varies in width because of the content in it. So if i'm not mistaken, i need the innerWidth. Whatever the case, in this case it needs to result in a width of 600.

I'm not using jquery but jqui, so i would like it in javascript alone seeing jqui does not have an inner-/outerwidth function. This does mean though that I have a $ selector to play with.

<style>
  .holder {
    width:100%; /* which in this case is 320px */
    overflow-x: auto;
    overflow-y:hidden;
  }

  .menu_item {
    width:200px;
    float:left;
  }
</style>

<div class="holder" onscroll="get_width(this)">
  <div class="menu_item">
    item1
  </div>
  <div class="menu_item">
    item2
  </div>
  <div class="menu_item">
    item3
  </div>
</div>

get_width(that) {
  alert(that.innerWidth); // returns undefined
  alert(that.width); // returns undefined
}

http://jsfiddle.net/TSQs7/2/

Answer 1

To get the width and height use clientWidth and clientHeight respectively.

element.clientWidth

UPDATE:

clientWidth is supported even in old ie6

Check out this for all platforms support:

platforms support reference

Check out this great article for more in depth info on different width related properties:

understanding offsetwidth clientwidth scrollwidth and height respectively

NOTE:

This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

clientWidth MDN

Fiddle Demo

Answer 2

I believe what you are looking for is element.offsetWidth