Javascript 以像素为单位获取元素宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5525049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get element width in px
提问by George Robinson
How to get element width in pixels (px)? jQuery always returns value in percent (pct).
如何以像素（px）为单位获取元素宽度？jQuery 总是以百分比 (pct) 为单位返回值。
HTML
HTML
<span class="myElement"></span>
CSS
CSS
.myElement {
float: left;
width: 100%;
height: 100%;
}
JavaScript
JavaScript
$('span.myElement').css('width') // returns '100%'
$('span.myElement').width() // returns '100'
Thanks!
谢谢！
回答by Blender
How many items have the class myElement? Consider using an id, not a class, as getting the width of two elements is not really possible (or logically understandable IMO).
课程有多少项目myElement？考虑使用 a id，而不是 a class，因为获得两个元素的宽度实际上是不可能的（或逻辑上可以理解的 IMO）。
I made a little demo, and for me, it outputs the width in pixels for a single spanelement with a width of 100%(for me, it alerts something around 400): http://jsfiddle.net/LqpNK/3/.
我做了一个小演示，对我来说，它输出span宽度为100%（对我来说，它会提醒周围的东西400）的单个元素的宽度（以像素为单位）：http: //jsfiddle.net/LqpNK/3/。
By the way, <span>element's can't have a set width or height, so setting their width and height does you no good. Instead, display them as a blockelement (so just replace <span>with <div>, or add display: block;to the CSS of .myElement).
顺便说一句，<span>元素不能设置宽度或高度，因此设置它们的宽度和高度对您没有好处。相反，将它们显示为一个block元素（因此只需替换<span>为<div>，或添加display: block;到 的 CSS 中.myElement）。
回答by tilleryj
.css('width') should return 100%, however .width() should (as described here http://api.jquery.com/width/) return a unit-less pixel amount. I created a jsfiddle to demonstrate: http://jsfiddle.net/yxCav/
.css('width') 应该返回 100%，但是 .width() 应该（如这里描述http://api.jquery.com/width/）返回一个无单位的像素数量。我创建了一个 jsfiddle 来演示：http: //jsfiddle.net/yxCav/
回答by Leo
Maybe
也许
elt.getBoundingClientRect().width
回答by ólafur Waage
From the jQuery documentation on width()
来自关于width()的 jQuery 文档
The difference between .css(width) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .width() method is recommended when an element's width needs to be used in a mathematical calculation.
.css(width) 和 .width() 之间的区别在于，后者返回一个无单位像素值（例如，400），而前者返回一个单位完整的值（例如，400px）。当需要在数学计算中使用元素的宽度时，建议使用 .width() 方法。
So it returns pixels if the pixel width is defined, but you are defining the width in %
因此，如果定义了像素宽度，它将返回像素，但您以 % 为单位定义宽度
回答by yunyun
I have experienced like in this post: jQuery width() not returning correct value on a div with generated content. If the div is not displayed earlier or are loading content dynamically, the .width() function returns the percentage value, but till the element is fully loaded the same .width() function will return width in pixels.
我在这篇文章中遇到过类似的情况：jQuery width() not returns correct value on a div with generated content。如果 div 未提前显示或正在动态加载内容，则 .width() 函数返回百分比值，但在元素完全加载之前，相同的 .width() 函数将以像素为单位返回宽度。
回答by SwiftNinjaPro
This worked for me:
这对我有用：
document.getElementById().offsetWidth;
