Javascript 从样式设置为 % 的元素获取宽度（以像素为单位）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11927844/
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 width in pixels from element with style set with %?
提问by lisovaccaro
I have this element:
我有这个元素：
<div style="width: 100%; height: 10px;"></div>
I want to get it's width in pixels. I just tried this:
我想得到它的宽度（以像素为单位）。我刚试过这个：
document.getElementById('banner-contenedor').style.width
Wich returns 100%. Is it possible to actually get the element's width in pixels with javascript?
返回100%。是否可以使用javascript实际获取元素的宽度（以像素为单位）？
回答by xdazz
document.getElementById('banner-contenedor').clientWidth
回答by GitaarLAB
You want to get the computed width. Try: .offsetWidth
您想获得计算出的宽度。尝试：.offsetWidth
(I.e: this.offsetWidth='50px'or var w=this.offsetWidth)
（即：this.offsetWidth='50px'或var w=this.offsetWidth）
You might also like this answeron SO.
您可能还喜欢SO 上的这个答案。
回答by Domino
Not a single answer does what was asked in vanilla JS, and I want a vanilla answer so I made it myself.
没有一个答案能满足 vanilla JS 中的要求，我想要一个 vanilla 答案，所以我自己做了。
clientWidth includes padding and offsetWidth includes everything else (jsfiddle link). What you want is to get the computed style (jsfiddle link).
clientWidth 包括填充，offsetWidth 包括其他所有内容（jsfiddle 链接）。您想要的是获得计算样式（jsfiddle 链接）。
function getInnerWidth(elem) {
return parseFloat(window.getComputedStyle(elem).width);
}
EDIT: getComputedStyleis non-standard, and can return values in units other than pixels. Some browsers also return a value which takes the scrollbar into account if the element has one (which in turn gives a different value than the width set in CSS). If the element has a scrollbar, you would have to manually calculate the width by removing the margins and paddings from the offsetWidth.
编辑：getComputedStyle是非标准的，可以以像素以外的单位返回值。如果元素有滚动条，某些浏览器还会返回一个值，该值将滚动条考虑在内（这反过来给出了与 CSS 中设置的宽度不同的值）。如果元素有滚动条，则必须通过从offsetWidth.
function getInnerWidth(elem) {
var style = window.getComputedStyle(elem);
return elem.offsetWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - parseFloat(style.borderLeft) - parseFloat(style.borderRight) - parseFloat(style.marginLeft) - parseFloat(style.marginRight);
}
With all that said, this is probably not an answer I would recommend following with my current experience, and I would resort to using methods that don't rely on JavaScript as much.
尽管如此，根据我目前的经验，这可能不是我建议遵循的答案，我会求助于使用不太依赖 JavaScript 的方法。
回答by Kris Roofe
回答by Reuben
Try jQuery:
试试jQuery：
$("#banner-contenedor").width();
回答by Mark
This jQuery worked for me:
这个 jQuery 对我有用：
$("#banner-contenedor").css('width');
This will get you the computed width
这将为您提供计算的宽度
回答by ffdigital
yourItem.style['cssProperty']
this way you can call the property string dynamically
这样你就可以动态调用属性字符串
