获取元素的宽度（以像素为单位）

Question

如何获取元素的像素宽度？jQuery始终以百分比（pct）返回值。

HTML

<span class="myElement"></span>

CSS

.myElement {
  float: left;
  width: 100%;
  height: 100%;
}

JavaScript

$('span.myElement').css('width') // returns '100%'
$('span.myElement').width() // returns '100'

谢谢！

- George Robinson

---

width() 应该是你想要的。如果它不起作用，可能是因为你正在使用非标准浏览器或有一些不寻常的设置。 - Noldorin

你确定这个元素不是既有100像素宽度，又有100%的宽度吗？ - clairesuzy

Answer 1

有多少个 class 为 myElement 的项目？考虑使用 id 而不是 class，因为获取两个元素的宽度并没有太大意义（在我看来也不合逻辑）。

我制作了一个小演示，在我的演示中，它会输出一个具有百分之百宽度的单个 span 元素的像素宽度（对我来说，它 alert 出约为 400）：http://jsfiddle.net/LqpNK/3/。

顺便说一下， 元素不能设置宽度或高度，因此设置它们的宽度和高度没什么用。相反，将它们显示为块级元素（所以只需将 替换为

，或者将 display: block; 添加到 .myElement 的 CSS 中）。

- Blender

Answer 2

.css('width')应该返回100％，然而.width()应该（如此处所述 http://api.jquery.com/width/）返回无单位像素值。我创建了一个jsfiddle来演示：http://jsfiddle.net/yxCav/

- tilleryj

Answer 3

也许。

elt.getBoundingClientRect().width

- Leo

---

这里有一个有趣的警告：如果元素上有变换，那么这将返回_displayed_宽度，而jQuery返回元素的实际宽度。也就是说，如果你rotateY(90deg)一个100px^2的盒子，上面的代码返回0，而jQuery返回100。 - AJFarkas

Answer 4

这对我很有效：

document.getElementById().offsetWidth;

- SwiftNinjaPro

Answer 5

从jQuery的width()文档中可以了解到：

.css(width)和.width()之间的区别在于后者返回一个无单位的像素值（例如，400），而前者返回一个带有单位的值（例如，400px）。当需要在数学计算中使用元素宽度时，建议使用.width()方法。

因此，如果像素宽度已定义，它将返回像素值，但是您正在以百分比定义宽度。

- Ólafur Waage

Answer 6

我曾经遇到过像这篇帖子中描述的问题：jQuery width() not returning correct value on a div with generated content。如果这个div之前没有被显示或者正在动态加载内容，.width()函数会返回百分比值，但是直到元素完全加载后，相同的.width()函数将返回像素宽度。

- yunyun