Skip to content

Instantly share code, notes, and snippets.

@fupslot
Last active February 2, 2016 16:03
Show Gist options
  • Save fupslot/d8738a0ca0a68e3b996c to your computer and use it in GitHub Desktop.
Save fupslot/d8738a0ca0a68e3b996c to your computer and use it in GitHub Desktop.
Draws a bounding box for a given element on the page
/*
Before run the example copy and paste this function into a browser console.
Example:
createBoundingBox($0);
createBoundingBox(document.getElementById('element-id'));
*/
function createBoundingBox(parentEl) {
var body = document.body;
var pRect = parentEl.getBoundingClientRect();
var box = document.createElement('div');
box.style.position = 'absolute';
box.style.padding = '0px';
box.style.margin = '0px';
box.style.border = 'none';
box.style.backgroundColor = 'rgba(255,0,0,0.5)';
box.style.left = (pRect.left + body.scrollLeft) + 'px';
box.style.top = (pRect.top + body.scrollTop) + 'px';
box.style.width = pRect.width + 'px';
box.style.height = pRect.height + 'px';
box.style.zIndex = Number.MAX_VALUE;
body.appendChild(box);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment