Box Model Inspector
Devtools style dom node inspector. Highlights the CSS box model just like chrome devtools. Draws a box around a given element highlighting width, height, margin, border & padding.
Demo: http://a-axton.github.io/box-model-inspector/
Caveats
- Expects box-sizing border-box
- Doesn't work well with fixed position elements. It highlights properly but won't stay in the proper position when scrolling.
Installation
npm
npm install box-model-inspector --save
inline
Theming
/* CONTENT */ /* MARGIN */ /* PADDING */ /* BORDER */
Sample Usage
var BoxModelInspector = ; // all options are optionalvar boxModelInspector = // initial element to highlight el: document0 // custom class, defaults to 'box-model' className: 'box-model' // will append to element, uses body as default appendTo: documentbody; // set new element to be highlighteddocumentbody; // refresh dimensionswindow;
Methods
setElement
Set new element to highlight
Example
var el = document;boxModelInspector;
refresh
Refresh current element's box model
Example
window;
hide
Hide it
Example
boxModelInspector;
show
Show it
Example
boxModelInspector;