Get width in pixels from element with style set with %?

Question

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?

You'll have to use computedstyle or jquery – PitaJ Aug 13 '12 at 03:30 — PitaJ, Aug 13 '12 at 03:30
It's easy http://stackoverflow.com/a/294273/6521116 – LF00 May 09 '17 at 07:33 — LF00, May 09 '17 at 07:33

score 131 · Accepted Answer · answered Aug 13 '12 at 03:30

131

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

answered Aug 13 '12 at 03:30

xdazz

158,678
38
247
274

3

Currently non-standard. It works in most browsers though, and is included in the [CSSOM View Module](http://www.w3.org/TR/cssom-view/#dom-element-clientwidth) draft. – RobG Aug 13 '12 at 05:54
1

If clientWidth and offsetWidth both return 0, what can be done? – Siva Bathula Sep 21 '20 at 13:21
does anyone really get the pixel size from it? – gumuruh Oct 28 '21 at 03:07
This includes padding, right? – Alec Jacobson Apr 07 '22 at 02:52
Not working if the width is specified inline or set via element.style.width – daniel p Dec 13 '22 at 10:55

score 17 · Answer 2 · edited Jan 31 '19 at 14:34

17

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.

edited Jan 31 '19 at 14:34

Neuron

5,141
5
38
59

answered Aug 13 '12 at 03:30

GitaarLAB

14,536
11
60
80

this includes padding and borders, right? – Alec Jacobson Apr 07 '22 at 02:54

Domino · Answer 3 · 2019-11-25T07:35:40.177

10

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.

edited Nov 25 '19 at 07:35

answered Mar 16 '15 at 20:00

Domino

6,314
1
32
58

This not working/have issues if width css is `100%`; – towry Mar 30 '20 at 03:32
@towry Care to explain what's the issue so I can correct my answer if needed? I wrote this five years ago. – Domino Mar 30 '20 at 12:18
I just had the issue days ago, Suppose the initial css is `width: 100%`, Then I use `getComputedStyle` to get the width in pixels, but it always return empty value, but in a timeout callback, it can get a correct pixel number value. – towry Mar 31 '20 at 07:07
@towry, at a guess your problem is calling getComputedStyle before the DOM is rendered. I have had this problem myself which is when it returns nothing. The solution is to wait until the DOM is ready. I do this by attaching a function to `document.addEventListener('readystatechange', myfunction);` My function checks that `document.readyState === 'complete'` before I do anything with `getComputedStyle`. Never a problem since. – Bernd Wechner Aug 24 '21 at 10:56

score 3 · Answer 4 · edited Jan 31 '19 at 14:33

3

You can use offsetWidth. Refer to this post and question for more.

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

div {border: 1px solid #F00;}

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

edited Jan 31 '19 at 14:33

Neuron

5,141
5
38
59

answered May 09 '17 at 07:32

LF00

27,015
29
156
295

Reuben · Answer 5 · 2013-05-09T03:53:15.023

1

Try jQuery:

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

edited May 09 '13 at 03:53

answered Aug 13 '12 at 03:30

Reuben

2,701
6
31
47

2

This return the width in % just without the % sign. – dorado May 22 '15 at 01:11

score -1 · Answer 6 · answered Aug 11 '15 at 08:11

-1

This jQuery worked for me:

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

This will get you the computed width

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

answered Aug 11 '15 at 08:11

Mark

765
8
12

this gives the % not the px value – eyal_katz Jan 09 '17 at 20:45

score -4 · Answer 7 · answered Dec 15 '16 at 22:15

-4

yourItem.style['cssProperty']

this way you can call the property string dynamically

answered Dec 15 '16 at 22:15

ffdigital

11
5

Get width in pixels from element with style set with %?

7 Answers7

Linked