获取没有jquery的元素的宽度

Question

没关系,我用oldschool方式计算元素.

我在主div里面有几个div.现在顶部的div有一个设定的宽度,但由于其中的内容,它的内部宽度不同.所以如果我没弄错的话,我需要innerWidth.无论如何,在这种情况下,它需要产生600的宽度.

我不是在使用jquery而是jqui,所以我想在javascript单独看jqui没有内/外宽带功能.这确实意味着我有一个$选择器可以玩.

<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

我相信你要找的是element.offsetWidth

Answer 2

要获取宽度和高度，请分别使用 clientWidth 和 clientHeight。

element.clientWidth

更新：

即使在旧的 ie6 中也支持 clientWidth

查看所有平台支持：

平台支持参考

查看这篇精彩的文章，了解有关不同宽度相关属性的更多深入信息：

分别了解 offsetwidth clientwidth 滚动宽度和高度

笔记：

此属性会将值舍入为整数。如果需要小数值，请使用 element.getBoundingClientRect()。

客户端宽度 MDN

小提琴演示