Read the width of a div with JavaScript

Question

I'm trying to read the width of a div without jQuery. The code I'm using is:

JS:

var windowwidth = parseInt(document.getElementById("window").style.width);
window.onload = function start() {
    alert(windowwidth);
}

HTML:

<div id="window">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

CSS:

#window {
    height: 250px;
    margin: 0 auto;
    width: 600px;
}

I don't understand why this isn't working, I've looked all over this site and google and can't figure out a solution. I don't want to use jQuery for this (it's a small custom HTML5 script so I don't need that huge library for one little thing) and even when I try the jQuery method, it still doesn't work.

Why not look in the jQuery source code to see how they did it? — Chris Laplante
– Chris Laplante, Commented Jun 25, 2011 at 19:51
Oo that might be a good idea if I can't figure it out another way, thanks. — JacobTheDev
– JacobTheDev, Commented Jun 25, 2011 at 20:02

davin · Accepted Answer · 2011-06-25 19:52:10Z

3

You're not guaranteed that document.getElementById() will work (i.e. will return the required element) before the DOM is ready. So try:

window.onload = function() { // removed the name to avoid some IE leaks
    var windowwidth = parseInt(document.getElementById("window").style.width);
    alert(windowwidth);
}

answered Jun 25, 2011 at 19:52

davin

45.6k9 gold badges81 silver badges78 bronze badges

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

4 Comments

JacobTheDev Over a year ago

That at least gave me the pop up, but it's giving me a value of NaN. Any ideas why? It works if I set the width inline, but I'd eventually like to release this for more than just me to use, and that might be a little confusing for people who don't read instructions.

davin Over a year ago

@Rev, I genuinely recommend you include jQuery (or a micro framework that is much lighter) even if it's just for this one little thing. Chances are you'll use it in other places, but even if not, it's a small price to pay to not have to implement this yourself and test and continually support new browsers etc. Like you said, .style.width isn't the best solution, so you start using .offsetWidth which isn't standard, and the spaghetti begins...

davin Over a year ago

Although you can try using document.getElementById("window").offsetWidth, not sure how it works with scroll and other such things (that a library would take care of), and like I said, it's not standard (although AFAIK widely supported)

Lime Over a year ago

This shouldn't work and if it does, then the code posted is incorrect. You would have to use getComputedStyle and currentStyle with a combination of offsetWidth to get this to work properly.

user578895 · Accepted Answer · 2011-06-25 20:10:06Z

2

don't read the style property, read the actual width of the element:

window.onload = function(){
    alert(document.getElementById('window').offsetWidth);
}

offsetWidth is what the browser says is the width, which can be different than what you're setting it to with CSS if, for example, the content stretches it wider.

answered Jun 25, 2011 at 20:10

user578895

Comments

Chris Laplante · Accepted Answer · 2011-06-25 20:09:18Z

1

If you want to see how jQuery does it, here is the link to the source: https://github.com/jquery/jquery/blob/master/src/dimensions.js

answered Jun 25, 2011 at 20:09

Chris Laplante

29.7k18 gold badges110 silver badges137 bronze badges

Comments

ju5tu5 · Accepted Answer · 2011-06-25 19:52:09Z

0

I would use jQuery to do such a thing. You can find the exact thing you want right here: http://api.jquery.com/width/

answered Jun 25, 2011 at 19:52

ju5tu5

1363 bronze badges

Comments

redexp · Accepted Answer · 2011-06-25 20:16:45Z

0

You can get style.width only after the element is drawn. Try to put your code to setTimeout(). Sometimes it helps me

window.onload = function(){
    setTimeout(
       function(){ alert(document.getElementById('window').style.width); },
       200
    );
}

answered Jun 25, 2011 at 20:16

redexp

5,1057 gold badges28 silver badges38 bronze badges

Collectives™ on Stack Overflow

Read the width of a div with JavaScript

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related