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
Which returns 100%
. Is it possible to actually get the element's width in pixels with JavaScript?
This question is related to
javascript
html
css
Not a single answer does what was asked in vanilla JS, and I want a vanilla answer so I made it myself.
clientWidth includes padding and offsetWidth includes everything else (jsfiddle link). What you want is to get the computed style (jsfiddle link).
function getInnerWidth(elem) {
return parseFloat(window.getComputedStyle(elem).width);
}
EDIT: getComputedStyle
is 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
.
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.
This jQuery worked for me:
$("#banner-contenedor").css('width');
This will get you the computed width
Try jQuery:
$("#banner-contenedor").width();
You want to get the computed width. Try: .offsetWidth
(I.e: this.offsetWidth='50px'
or var w=this.offsetWidth
)
You might also like this answer on SO.
yourItem.style['cssProperty']
this way you can call the property string dynamically
Source: Stackoverflow.com