JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!doctype html>
<html lang="en">
<link rel="stylesheet" href="https://jsfiddle.net/css/dist-editor-dark.css?9c307ec363c36b1d0dfbf2ee64220cc5ab9c45f2">
<body>
  <div id="container" class="outerclass otherclass"></div>
</body>
</html>

CSS

.outerclass {
  font-size: 14px;
  margin: 10px;
  padding: 3px;
  color: purple !important;
}

.otherclass {
  font-size: 14px;
  margin: 10px;
  padding: 3px;
  color: yellow;
}

JavaScript

var classname = getRenderedStyles(document.getElementById("container"));
//classname.local = document.getElementById("container").className;
//.className);
//alert(JSON.stringify(classname));
//document.getElementById("container").className;

var totalClasses = document.getElementById("container").innerHTML = JSON.stringify(classname);


function getRenderedStyles(element) {
    var tmpele, tmpstyle, elestyle, varstyle, elecolor, eletag;
    var styles   = {};
    var defstyle = {};
    elestyle   = window.getComputedStyle(element);
    elecolor   = elestyle.color; 
    eletag     = element.tagName;
    var frag = document.createDocumentFragment();
    frag.appendChild(document.documentElement);
    tmpele   = document.appendChild(document.createElement(eletag));
    tmpstyle = window.getComputedStyle(tmpele);
    styles['color']     = elecolor===tmpstyle.color?undefined:elecolor;
    tmpele.style.color  = elecolor; // workaround for color propagation on other styles 
    for (var i in tmpstyle)
        defstyle[i] = tmpstyle[i];
    tmpele.remove();
    document.appendChild(frag);
    varstyle = element.style;
    for (var i in varstyle) {
        if ((((typeof varstyle[i])==="string"))&&(i!=="cssText")) {
            if ((defstyle[i]!==elestyle[i]))
                styles[i] = elestyle[i];
        }
    }
    return styles;
}