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/

possible duplicate of [How to get image size (height & width) using JavaScript?](http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript) — Mild Fuzz, Feb 19 '14 at 17:34

score 6 · Answer 1 · answered Feb 19 '14 at 17:26

6

I believe what you are looking for is element.offsetWidth

answered Feb 19 '14 at 17:26

Will P.

8,437
3
36
45

returns 320, which is width of page. i need the inside width – Matt Feb 19 '14 at 17:37
thanks for this, it returns the exact width of an element – bdalina Nov 10 '17 at 03:18

score 5 · Answer 2 · edited May 23 '17 at 11:49

5

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

edited May 23 '17 at 11:49

Community

1
1

answered Feb 19 '14 at 17:27

Shaik Mahaboob Basha

1,092
5
14

returns 320, which is width of page. i need the inside width – Matt Feb 19 '14 at 17:37
Wait a minute I will check and give you the fiddle link – Shaik Mahaboob Basha Feb 19 '14 at 17:38
it gives back a complete object. Which one do i need? – Matt Feb 19 '14 at 17:41
Wait a minute I will check and give you the fiddle link – Shaik Mahaboob Basha Feb 19 '14 at 17:41
@Matt Check the answer, I added fiddle demo http://jsfiddle.net/TSQs7/ I am getting 544 as width – Shaik Mahaboob Basha Feb 19 '14 at 17:45
1

I think i'm a bit assholedhere. I've updated your fiddle with the exact CSS i have and it doesn't work in jsfiddle (some kind of wrapping is going on for some reason). It does however work in phonegap ios and phonegap android (live and working on all phones) and working in all browsers. But your example still returns the screen width, and not the width of the inside, which is what i need. – Matt Feb 19 '14 at 18:04
ok, so this is the fiddle as it is in my code an how it works everywhere (except in fiddle): http://jsfiddle.net/TSQs7/2/ – Matt Feb 19 '14 at 18:08
The fiddle was returning the window width for me. – BBaysinger Aug 20 '19 at 20:58

Get width of an element without jquery

2 Answers2