Get Computed Styles of element

by Marventus

HTML

<div id="myDiv" style="height:200px; width: 100px"></div>
<br/>
<button>Log Computed Styles</button>

CSS

#myDiv {
    background: grey;
    height: 50px;
    width: 200px;
}
.cloneDiv {
    left: -10000;
    opacity: 0;
    top: -10000;
    position: absolute;
    z-index: -1;
}

JavaScript

jQuery(function($) {
    function getRawStyles(sel, styles) {
        /*  sel = selector str (Ex: "body", "#div", ".div", etc.
         *  styles = array of styles to get.
         */
        sel = $(sel);
        var clone = sel.clone().removeAttr("style").attr("class", "cloneDiv").insertBefore(sel);
        $.each(styles, function(index, style) {
            console.log( style + ": " + $(clone[0]).css(style) );
        });
         $(".cloneDiv").remove();  
    }
    $(document).ready(function() {
        $("button", this).on("click", function() {
            getRawStyles("#myDiv", ["height", "width"]);
        });
    });
});