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
– Dan Grahn, Commented Jul 17, 2013 at 12:12
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
– Magnus Lind Oxlund, Commented Jun 18, 2018 at 21:00

Patsy Issa · Accepted Answer · 2013-07-17 12:11:58Z

6

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

answered Jul 17, 2013 at 12:11

Patsy Issa

11.3k5 gold badges57 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Em Sta Over a year ago

works, and how can i get the Height? If i set #areaDraw to height: 30% for example?

Patsy Issa Over a year ago

instead of offsetWidth you would use offsetHeight

Patsy Issa Over a year ago

@EmSta give this a read as a refrence, w3schools.com/jsref/dom_obj_all.asp

Em Sta Over a year ago

The thing is, i tried offsetHeight, but somehow it wont work!

Patsy Issa Over a year ago

@EmSta could you post your code in a fiddle? Would make helping you easier

|

SharkofMirkwood · Accepted Answer · 2013-07-17 12:20:54Z

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, 2013 at 12:20

answered Jul 17, 2013 at 12:12

SharkofMirkwood

13k2 gold badges20 silver badges25 bronze badges

2 Comments

Jeff Noel Over a year ago

You could also explain why the first option did not work, and why this one does.

Liam Over a year ago

or you could read this answer, that does explain why :) stackoverflow.com/a/6480217/542251

Gintas K · Accepted Answer · 2013-07-17 12:13:14Z

1

document.getElementById("areaDraw").offsetWidth

try this one :)

answered Jul 17, 2013 at 12:13

Gintas K

1,4783 gold badges18 silver badges39 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 17, 2013 at 12:17

Jeff Noel

7,6274 gold badges43 silver badges67 bronze badges

Comments

Claudio Redi · Accepted Answer · 2013-07-17 12:19:06Z

1

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.

answered Jul 17, 2013 at 12:19

Claudio Redi

68.6k15 gold badges138 silver badges161 bronze badges

Comments

nim · Accepted Answer · 2016-11-17 23:52:50Z

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);

Collectives™ on Stack Overflow

Javascript width of div, returns 0

6 Answers 6

7 Comments

2 Comments

Comments

Explanation

Solution

More information

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

2 Comments

Comments

Explanation

Solution

More information

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related