Available on: InDom

Returns a DOMRect that expands the underlying element’s bounding box by its margins.

Returns: {DOMRect} - Native object with left / x, top / y, width, height, right, bottom.

Throws:

Examples:

const div = $n('<div></div>');
div.setStyle({
	'display': 'inline-block',
	'position': 'fixed',
	'top': '110px',
	'left': '130px',
	'width': '100px',
	'height': '150px',
	'background-color': 'blue',
	'margin': '10px 20px'
});

$1('body').append(div);

console.log(div.getBox());
//DOMRect {"top":120,"left":150,"right":250,"bottom":270,"width":100,"height":150}

const outerBox = div.getOuterBox();
console.log(outerBox);
//DOMRect {"x":130,"y":110,"width":140,"height":170,"top":110,"right":270,
//"bottom":280,"left":130}

const div2 = $n('<div></div>');
div2.setStyle({
	'display': 'inline-block',
	'position': 'fixed',
	'top': outerBox.top + 'px',
	'left': outerBox.left + 'px',
	'width': outerBox.width + 'px',
	'height': outerBox.height + 'px',
	'background-color': 'red'
});
$1('body').append(div2);
// red div2 overlay: exactly covers the margin box of the div blue element