javascript - Get width of an element without jquery - Stack Overflow

admin管理员组

文章数量:1291334

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
}

/

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/TSQs7/2/

• javascript

Share Improve this question Follow edited Feb 19, 2014 at 18:39 Matt asked Feb 19, 2014 at 17:23 MattMatt 1,1311616 silver badges2828 bronze badges 1

• possible duplicate of How to get image size (height & width) using JavaScript? – Mild Fuzz Commented Feb 19, 2014 at 17:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I believe what you are looking for is element.offsetWidth

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

本文标签： javascriptGet width of an element without jqueryStack Overflow