Wrong div width when getting it with javascript

Question

I'm trying to get div's width with javascript. Initially div's width is undefined, ie width depends on amount of text on it. Is it possible to get width of this kind of div? I'm trying to do it with following javascript code, but i'm getting width differerent from Chrome console when i'm inspecting div

var mydiv = document.getElementById("error_message");
var curr_width = mydiv.clientWidth;
alert(curr_width);

Thank you for your attention

Initially an unstyled div will have a width equal to its container's width. That's due to the default display:block styling. — zzzzBov
– zzzzBov, Commented Mar 9, 2011 at 17:31
Can you add the HTML too ... im not sure your DIV will be the width of a the text within it ... its a BLOCK element — Manse
– Manse, Commented Mar 9, 2011 at 17:32
it's generated with document.write("<div id=\"error_message\">Wrong username or password!</div>"); and css is div#error_message{ display:block; position: absolute; padding: 2px; top: 0px; border: 1px solid #FF0000; background: #FFCCFF; font-family: Arial; font-size: 13px; color: #FF0000; } — andriy
– andriy, Commented Mar 9, 2011 at 17:34
And what is the width thats being shown in the alert ? what did you expect is to be ? — Manse
– Manse, Commented Mar 9, 2011 at 17:49
in alert it is 1008 and in console it is 183, so i'm expecting 183 — andriy
– andriy, Commented Mar 9, 2011 at 17:59

n00b · Accepted Answer · 2011-03-09 17:32:19Z

6

use offsetWidth

clientWidth is calculated width, offsetWidth is the one in "Chrome inspect element" (i think)

3 Comments

andriy Over a year ago

but your div is also undifined initially?

andriy Over a year ago

i've got it worked! but sumetimes when i'm refreshing page it's printing right width nad sometimes wrong width again!

n00b Over a year ago

dont use document.write() but create node with js or jQuery, and launch your script in onload...

methodofaction · Accepted Answer · 2011-12-15 05:08:55Z

1

While the OP doesn't specify one way or the other, if you happen to have jQuery available, you can always use this:

var curr_width = $('#error_message').width();

edited Dec 15, 2011 at 5:08

methodofaction

72.8k22 gold badges159 silver badges166 bronze badges

answered Mar 9, 2011 at 17:41

Mysterei

336 bronze badges

1 Comment

andriy Over a year ago

i'm getting following code when i'm alert(curr_width)

function (a){var f=this[0];if(!f)return a==null?null:this;if(d.isFunction(a))return this.each(function(b){var c=d(this);c[e](a.call(this,b,c[e]()))});if(d.isWindow(f)){var g=f.document.documentElement["client"+c];return f.document.compatMode==="CSS1Compat"&&g||f.document.body["client"+c]||g}if(f.nodeType===9)return ...

andriy · Accepted Answer · 2011-03-09 18:54:30Z

0

I managed to solve the problem! I was trying to create div directly in javascript, without defining div on html body. So inside of tag i've created

<div id="error_message" style="visibility:hidden;"></div>

and it's worked! Final javascript code is:

document.write("<div id=\"error_message\">Wrong username or password!</div>");
var mydiv = document.getElementById("error_message");
var curr_width = mydiv.offsetWidth;
alert(curr_width);

answered Mar 9, 2011 at 18:54

andriy

4,1649 gold badges50 silver badges72 bronze badges

Collectives™ on Stack Overflow

Wrong div width when getting it with javascript

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related