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

• javascript
• css

• 1 I would recommend jQuery as it has a more robust .width() function, but if you are locked into pure JS. Use offsetWidth. – Dan Grahn Commented Jul 17, 2013 at 12:12
• Posisble duplicate stackoverflow.com/questions/6480125/… – Liam Commented Jul 17, 2013 at 12:12
• possible duplicate of How to find the width of a div – Patsy Issa Commented Jul 17, 2013 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 Commented Jun 18, 2018 at 21:00

6 Answers 6

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

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.

document.getElementById("areaDraw").offsetWidth

try this one :)

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.

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.

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