Javascript width of div, returns 0

Question

I m trying to retrieve the width of an div for my function with javascript:

#areaDraw {
margin-top:50px;
width: 50%;
min-height: 100%;
z-index: 1000;
}

and the function:

 Event.add(window, "resize", function() {
    sketch.resize(document.getElementById("areaDraw").style.width,   window.innerHeight);
}).listener();

somehow javascript always returns 0 for the width of the div(areaDraw)

so whats wrong with:

document.getElementById("areaDraw").style.width

I would recommend jQuery as it has a more robust `.width()` function, but if you are locked into pure JS. Use `offsetWidth`. — Dan Grahn, Jul 17 '13 at 12:12
Posisble duplicate http://stackoverflow.com/questions/6480125/read-the-width-of-a-div-with-javascript?rq=1 — Liam, Jul 17 '13 at 12:12
possible duplicate of [How to find the width of a div](http://stackoverflow.com/questions/4787527/how-to-find-the-width-of-a-div) — Patsy Issa, Jul 17 '13 at 12:17
For future visitors, it may be worth checking if your browser's developer tools panel is interfering with the element being measured. Try opening developer tools in its own window. — Magnus Lind Oxlund, Jun 18 '18 at 21:00

score 4 · Accepted Answer · answered Jul 17 '13 at 12:11

4

Try document.getElementById("mydiv").offsetWidth instead of .style.width

answered Jul 17 '13 at 12:11

Patsy Issa

11,113
4
55
74

works, and how can i get the Height? If i set #areaDraw to height: 30% for example? – Em Sta Jul 17 '13 at 12:17
instead of offsetWidth you would use offsetHeight – Patsy Issa Jul 17 '13 at 12:18
@EmSta give this a read as a refrence, http://www.w3schools.com/jsref/dom_obj_all.asp – Patsy Issa Jul 17 '13 at 12:20
The thing is, i tried offsetHeight, but somehow it wont work! – Em Sta Jul 17 '13 at 12:22
1

@EmSta could you post your code in a fiddle? Would make helping you easier – Patsy Issa Jul 17 '13 at 12:25
I hope this snippet helps? The original code, is very long! http://jsfiddle.net/954ag/ – Em Sta Jul 17 '13 at 12:30
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/33635/discussion-between-patsy-issa-and-em-sta) – Patsy Issa Jul 17 '13 at 12:37

SharkofMirkwood · Answer 2 · 2013-07-17T12:20:54.197

4

Use this instead:

document.getElementById("areaDraw").offsetWidth

Edit: As requested, an explanation of why this works (just as an extra reference).

It's because the property style.width is the width as defined explicitly in the CSS, wheareas offsetWidth finds the actual width of the element as it's displayed in the browser.

edited Jul 17 '13 at 12:20

answered Jul 17 '13 at 12:12

SharkofMirkwood

11,483
2
17
25

You could also explain **why** the first option did not work, and why this one does. – Jeff Noel Jul 17 '13 at 12:14
**or** you could read this answer, that does explain why :) http://stackoverflow.com/a/6480217/542251 – Liam Jul 17 '13 at 12:16

score 1 · Answer 3 · answered Jul 17 '13 at 12:13

1

document.getElementById("areaDraw").offsetWidth

try this one :)

answered Jul 17 '13 at 12:13

Gintas K

1,438
3
18
38

score 1 · Answer 4 · edited Jun 20 '20 at 09:12

Explanation

Your #areaDraw div element is probably empty at the moment you try to get the width of it.

element.style.width gets the width of the content of the element, regardless the padding or margin attributes.

Solution

Try using the .offsetWidth(Source: MDN) attribute. The difference is that it includes the full width of the element with its padding and margin attributes.

More information

See the MSDN example along with its reference.

score 1 · Answer 5 · answered Jul 17 '13 at 12:19

You could also try using window.getComputedStyle

var elem = document.getElementById("areaDraw");
var width = window.getComputedStyle(elem, null).width;

Take into account that width will be a string in this case (e,g '290.5px')

getComputedStyle() gives the final used values of all the CSS properties of an element.

score 0 · Answer 6 · answered Nov 17 '16 at 23:52

Element must have style="display: block;" and My solution:

intId = 0;

function resize(con)
{
    var width = con.offsetWidth;

    if (width == 0)
    {
        var resfnc = function(con)
        {
            return function()
            {
                var width = con.offsetWidth;

                if (width == 0)
                {
                    return;
                }

                clearInterval(intId);

                resize(con);
            }
        }

        intId = setInterval(resfnc(con), 50);

        return;
    }

    //...... work here
}

var resf = function (con)
{
    return function ()
    {
        resize(con);
    };
};


var con = document.querySelector("#elementID");

window.addEventListener('resize', resf(con), true);

Javascript width of div, returns 0

6 Answers6

Explanation

Solution

More information