CSS Box Model and Dojo/dom-geometry

Posted on

Since Dojo 1.7, dojo.position, dojo.marginBox, and dojo.contentBox should be called with dojo/dom-geometry module. dojo.position returns an object for the size and the x/y coordinates of the domNode. marginBox and contentBox are based on CSS box model so users can manipulate the position of a domNode. Basically marginBox includes information for margin/padding/border-width, but contentbox only looks at the padding and the domNode itself.

HTML:

<div id="firstBox">Box #1 W:60px H:60px</div>
<div id="secondBox">Box #2 W:100px H:100px</div>

Dojo 1.7:

require(["dojo/parser", "dojo/dom-geometry", "dojo/domReady!"], function(parser, domGeom) {

    var marginBox = domGeom.getMarginBox('secondBox'),
        contentBox = domGeom.getContentBox('secondBox');

    console.log(domGeom.position('secondBox'));
    console.log("MarginBox - T: " + marginBox.t + ", L: " + marginBox.l + ", W: " + marginBox.w + ", H: " + marginBox.h);
    console.log("ContentBox - T: " + contentBox.t + ", L: " + contentBox.l + ", W: " + contentBox.w + ", H: " + contentBox.h);

    setTimeout(function() {
        //set the width and height of the domNode 
        //size will not be the same as the first box becuase of the padding
        domGeom.setContentSize('secondBox', {
            w: 60,
            h: 60
        });
    }, 2000);

});​

CSS:

#firstBox{
 width:60px;
 height:60px;
 border:1px solid #1de;
}

#secondBox {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 1px solid #ccc;
  position: relative;
  top:10px;
  left:10px;
}​

Two boxes before the second box is resized:

Output in console:


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>