获取没有jquery的元素的宽度

Posted 2023-03-05

【中文标题】获取没有jquery的元素的宽度

【英文标题】：Get width of an element without jquery

【发布时间】：2014-03-20 05:07:35

【问题描述】：

没关系，我用老式的方法来计算元素。

我在一个主 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/

【问题讨论】：

How to get image size (height & width) using JavaScript?的可能重复

【参考方案1】：

我相信你要找的是element.offsetWidth

【讨论】：

返回 320，即页面宽度。我需要内宽

感谢，它返回元素的确切宽度

【参考方案2】：

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

element.clientWidth

更新：

即使在旧版 ie6 中也支持 clientWidth

查看所有平台支持：

platforms support reference

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

understanding offsetwidth clientwidth scrollwidth and height respectively

注意：

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

clientWidth MDN

Fiddle Demo

【讨论】：

返回 320，即页面宽度。我需要内宽

等一下，我会检查并给你小提琴链接

它返回一个完整的对象。我需要哪一个？

等一下，我会检查并给你小提琴链接

我觉得我有点混蛋。我已经用我拥有的确切 CSS 更新了你的小提琴，但它在 jsfiddle 中不起作用（出于某种原因，某种包装正在进行）。然而，它确实适用于 phonegap ios 和 phonegap android（在所有手机上运行和运行）并在所有浏览器中运行。但是您的示例仍然返回屏幕宽度，而不是内部的宽度，这是我需要的。