dojo.coords¶
| since: | 1.0 |
|---|---|
| Deprecated: | since 1.4 |
Contents
Getter for the complete coordinates of a dom node.
Introduction¶
The dojo coords function is used to obtain a plethora of coordinate information about a dom node. The type of information it returns is relative position to its parent in the form of ‘left’ and ‘top’ values, the width and height of the dom node, and absolute position in the form of page x and y coordinates. Effectively, it is a combination of margin box values dojo.marginBox and dojo.position. Because of this redundancy and because the return attributes use differing box-types, this method is being deprecated beginning with Dojo 1.4 but is being kept active for backward compatibility. The return object looks like:
{ l: 50, t: 200, w: 300: h: 150, x: 700, y: 900, }
for a node offset from its parent 50px to the left, 200px from the top with a margin width of 300px and a margin-height of 150px, with page absolute coordinates (border-box) of 700px on the x axis and 900px on the y axis.
Since dojo 1.7, dojo.coords is available in dojo/_base/html for backward-compatibility.
Usage¶
Dojo 1.7+ (AMD)¶
require(["dojo"], function(dojo){
var coords = dojo.coords(node);
});
Dojo < 1.7¶
var coords = dojo.coords(node);
Examples¶
Example 1: Look up a positioned DOM node and calculate its coordinates¶
function init(){
var node = dojo.byId("box");
var coords = dojo.coords(node);
var info = dojo.byId("info");
info.appendChild(document.createTextNode("Width: " + coords.w + "px. Height: " + coords.h + "px. Relative top: " + coords.t +
"px Relative left: " + coords.l + "px. Absolute top: " + coords.y + "px. Absolute left: " + coords.x + "px."));
}
dojo.ready(init);
<div id="box" style="width: 100px; height: 100px; background-color: darkgray;"></div>
<br>
<span id="info"></span>
Example 2: Look up a positioned dijit and calculate its coordinates¶
dojo.require("dijit.form.TextBox");
function init(){
var node = dijit.byId("textbox").domNode;
var coords = dojo.coords(node);
var info = dojo.byId("infoSpan");
info.appendChild(document.createTextNode("Width: " + coords.w + "px. Height: " + coords.h + "px. Relative top: " + coords.t +
"px Relative left: " + coords.l + "px. Absolute top: " + coords.y + "px. Absolute left: " + coords.x + "px."));
}
dojo.ready(init);
<div id="textbox" data-dojo-type="dijit.form.TextBox"></div>
<br>
<br>
<span id="infoSpan"></span>
Comparison of various DOM node position/size methods¶
Notes¶
- For dom nodes with border styles, on Internet Explorer the absolute coordinates (x and y axis), do not include the border position, so you may have to adjust for that depending on what your indented usage of the information is.
- Remember that page coordinates start as the top leftmost of the page is 0px, 0px