dojo/dom-geometry::setMarginBox()

Project owner:Eugene Lazutkin
since:V1.7

Sets the size of the node’s margin box and placement (left/top), irrespective of box model. Think of it as a passthrough to setBox that handles box-model vagaries for you.

Usage

require(["dojo/dom-geometry", "dojo/dom", "dojo/dom-style"], function(domGeom, dom, style){
  var node = dom.byId("someNode");
  var box = { l: 20, t: 20, w: 200, h: 200 };
  var computedStyle = style.getComputedStyle(node);
  domGeom.setMarginBox(node, box, computedStyle);
});

Attributes

Arguments Type Description
node String|DOMNode The node to return the information for
box Object A hash with optional l, t, w, and h properties for “left”, “right”, “width”, and “height” respectively. All specified properties should have numeric values in whole pixels.
computedStyle Object? This parameter accepts computed styles object. If this parameter is omitted, the function will call dojo/dom-style::getComputedStyle() to get one. It is a better calling dojo/dom-style::getComputedStyle() once, and then passing the reference as an argument, wherever possible.

Examples

require(["dojo/dom-geometry", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!"],
function(domGeom, dom, style, on, JSON){
  on(dom.byId("command"), "click", function(){
    var node = dom.byId("example");
    var box = { l: 40, t: 40, w: 200, h: 200 };
    var computedStyle = style.getComputedStyle(node);
    domGeom.setMarginBox(node, box, computedStyle);
  });
});
<button id="command" type="button">setMarginBox()</button>
<div class="example" id="example">Some example node</div>
.example{
  margin: 1em;
  text-align: center;
  padding: 1em;
  border: 2px solid black;
  color: white;
  background-color: blue;
  width: 200px;
  height: 100px;
}
Error in the documentation? Can’t find what you are looking for? Let us know!