从样式设置为％的元素获取像素宽度

我有这个元素：

<div style="width: 100%; height: 10px;"></div> 

我想得到它的像素宽度。 我只是试过这个：

 document.getElementById('banner-contenedor').style.width 

很好返回100% 。 是否有可能实际得到的像素与JavaScript的元素的宽度？

Answer 1

 document.getElementById('banner-contenedor').clientWidth 

Answer 2

你想得到计算的宽度。 试试： .offsetWidth

（即： this.offsetWidth='50px'或var w=this.offsetWidth ）

你也可能喜欢这个答案 。

祝你好运！

Answer 3

没有一个答案是什么在香草JS问，我想要一个香草的答案，所以我自己做了。

clientWidth包括填充和offsetWidth包括一切（ jsfiddle链接 ）。 你想要的是得到计算的风格（ jsfiddle链接 ）。

 function getInnerWidth(elem) { return parseFloat(window.getComputedStyle(elem).width); } 

编辑： 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); } 

Answer 4

试试jQuery：

 $("#banner-contenedor").width(); 

Answer 5

你可以使用offsetWidth。 参考这篇文章和问题的更多。

 console.log("width:" + document.getElementsByTagName("div")[0].offsetWidth + "px"); 

 div {border: 1px solid #F00;} 

 <div style="width: 100%; height: 10px;"></div> 

Answer 6

这个jQuery为我工作：

 $("#banner-contenedor").css('width'); 

这将得到你计算的宽度

http://api.jquery.com/css/

Answer 7

 yourItem.style['cssProperty'] 

这样你可以dynamic地调用属性string