Question

如何获得以像素为单位的元素宽度（px）？ 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'

谢谢！

Answer 1

班级myElement有多少项？考虑使用id，而不是class，因为实际上不可能获得两个元素的宽度（或逻辑上可理解的IMO）。

我做了一个小演示，对我来说，它输出宽度为span的单个100%元素的宽度（以像素为单位）（对我来说，它会警告400周围的某些内容）：http://jsfiddle.net/LqpNK/3/。

顺便说一下，<span>元素不能有设定的宽度或高度，所以设置它们的宽度和高度对你没有好处。相反，将它们显示为block元素（因此只需将<span>替换为<div>，或将display: block;添加到.myElement的CSS中。

Answer 2

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

Answer 3

也许

elt.getBoundingClientRect().width

Answer 4

来自width()

上的jQuery文档

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

因此，如果定义了像素宽度，则返回像素，但是您在％

中定义宽度

Answer 5

我在这篇文章中体验过：jQuery width() not returning correct value on a div with generated content。如果div未提前显示或正在动态加载内容，则.width（）函数返回百分比值，但在元素完全加载之前，相同的.width（）函数将返回宽度（以像素为单位）。

Answer 6

这对我有用：

document.getElementById().offsetWidth;

获取px中的元素宽度

6 个答案: