useful function to get an HTML Element detail as an object.

get_element_detail.js

window.HTMLElementDetail = function(elm) {
    var rect = elm.getBoundingClientRect(),
        style = window.getComputedStyle(elm, null);
    return {
        textContent: elm.textContent || elm.innerText,
        selector: document.generateSelector([elm]),
        css: {
            top: (rect.top + window.scrollY) + 'px',
            left: (rect.left + window.scrollX) + 'px',
            //right:       rect.right + 'px',
            //bottom:      rect.bottom + 'px',
            width: rect.width + 'px',
            height: rect.height + 'px',
            fontSize: style.getPropertyValue('font-size'),
            fontFamily: style.getPropertyValue('font-family'),
            fontStyle: style.getPropertyValue('font-style'),
            fontWeight: style.getPropertyValue('font-weight'),
            fontVariant: style.getPropertyValue('font-variant'),
            textAlign: style.getPropertyValue('text-align').replace('-webkit-', ''),
            lineHeight: style.getPropertyValue('line-height'),
        }
    };
};