JSFiddle - React, Tailwind, and code Playground

HTML

<button>click</button>
<div class="p">
    <div id="styled" style="font-weight:bold">
        This div is styled using inheritance, its ID,
        and inline style declarations.
    </div>
</div>
<span>First unstyled span.</span>
<span>Second unstyled span.</span>
<span>Third unstyled span.</span>

CSS

.p div {
    text-decoration : underline;
    margin-bottom : 20px;
}
#styled {
    font-family : Tahoma;
    color : #F90;
    padding : 10px;
    border : 1px solid #DDD;
    background-color : #EEE;
}

JavaScript

$.fn.getStyleObject = function(){
    var dom = this.get(0);
    var style;
    var returns = {};
    if(window.getComputedStyle){
        var camelize = function(a,b){
            return b.toUpperCase();
        }
        style = window.getComputedStyle(dom, null);
        for(var i = 0, l = style.length; i < l; i++){
            var prop = style[i];
            var camel = prop.replace(/\-([a-z])/, camelize);
            var val = style.getPropertyValue(prop);
            returns[camel] = val;
        }
        return returns;
    }
    if(dom.currentStyle){
        style = dom.currentStyle;
        for(var prop in style){
            returns[prop] = style[prop];
        }
        return returns;
    }
    if(style = dom.style){
        for(var prop in style){
            if(typeof style[prop] != 'function'){
                returns[prop] = style[prop];
            }
        }
        return returns;
    }
    return returns;
}
 
$(document).ready(function(){
    $("button").click(function(){
        var style = $("#styled").getStyleObject();
        $("body > span").css(style);
    });
});