JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li id="myli" class="myclass">Hello</li>
</ul>

CSS

ul {
    font-family:verdana;
}
.myclass{
   color:red;       
}
li.myclass{
   background-color:black;
}
li{
   float:left;
}

JavaScript

function css(a) {
    var sheets = document.styleSheets, o = [], o2 = [];
    a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            console.log(rules[r].style);
            if (a.matches(rules[r].selectorText)) {
                o.push(rules[r].cssText);
                o2 = jQuery.extend(o2, css2json(rules[r].style.cssText), css2json(jQuery(a).attr('style')));
            }
        }
    }
    return {o:o,o2:o2};
}

function css2json(css){
        var s = {};
        if(!css) return s;
        if(css instanceof CSSStyleDeclaration) {
            for(var i in css) {
                if((css[i]).toLowerCase) {
                    s[(css[i]).toLowerCase()] = (css[css[i]]);
                }
            }
        } else if(typeof css == "string") {
            css = css.split("; ");          
            for (var i in css) {
                if(css.hasOwnProperty(i)){
                    var l = css[i].split(": ");
                    s[l[0].toLowerCase()] = (l[1]);
                }
            };
        }
        return s;
    }

console.log(css(document.getElementById('myli')).o);
console.log(css(document.getElementById('myli')).o2);