Calculating html element (div) width with javascript/dojo?

Question

Normally when you have a div created in html. You can check its width with offsetWidth or style.width (if declared). However if the innerHTML is changed such that the width of the div is also change, neither of those functions work (not sure, but they haven't in my cases).

some code:

var div = document.createElement("div");
div.innerHtml = "asdfasdfasdfasdfsdfasdfasdfad";
alert(div.style.width); // this is nothing
alert(div.offsetWidth); // this is 0

How do you get the width of the div above?

perhaps you'd find dojox/html/metrics useful

peller
– peller

2012-04-09 02:26:18 +00:00
Commented Apr 9, 2012 at 2:26 — peller
– peller, Commented Apr 9, 2012 at 2:26

user24950814234 · Accepted Answer · 2013-10-11 13:29:54Z

3

I realize this is an old question, but for the many people landing here from google I'll provide it.

This is the way to do it in dojo 1.7+. With the geometry module you can get and set the width of the content (not including padding or border). This ignores box-sizing.

require(['dojo/dom-geometry'], function(domGeom) {
    var myDivNode = dojo.query('div')[0];
    var contentBox = domGeom.getContentBox(myDivNode);
    alert(contentBox.w);

    // This is how to set width/height
    domGeom.setContentSize(myDivNode, {w: 100, h: 100});
});

Source: https://dojotoolkit.org/reference-guide/1.7/dojo/contentBox.html

edited Oct 11, 2013 at 13:29

answered Oct 10, 2013 at 13:58

user24950814234

2,0371 gold badge17 silver badges21 bronze badges

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

Comments

Okan Kocyigit · Accepted Answer · 2012-04-06 21:43:02Z

1

you can't get width value of element that wasn't appended to document.

so you should append it to page, than you can get width,

here is a working demo

edited Apr 6, 2012 at 21:43

answered Apr 6, 2012 at 20:49

Okan Kocyigit

13.5k18 gold badges74 silver badges132 bronze badges

Collectives™ on Stack Overflow

Calculating html element (div) width with javascript/dojo?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related