JSFiddle - React, Tailwind, and code Playground
HTML
<div id= "wraper ">
<div class= "main ">
<ul>
<li> <div id="square" class="box"> parallelogram </div> </li>
<li> <div id = "parallelogram" class="box"> parallelogram </div> </li>
<li> <div id = "parallelogram2" class="box"> parallelogram2 </div> </li>
</ul>
</div>
<textarea name= "show" id= "show" cols="30" rows= "10">
</textarea>
CSS
#square {
width: 100px;
height: 100px;
background: red;
}
#parallelogram{
width:100px;
height:70px;
background:blue;
-webkit-transform:skew(20deg);
-moz-transform:skew(20deg);
-o-transform:skew(20deg);
transform:skew(20deg);
}
#parallelogram2{
width:100px;
height:70px;
background:blue;
-webkit-transform:skew(-20deg);
-moz-transform:skew(-20deg);
-o-transform:skew(-20deg);
transform:skew(-20deg);
}
JavaScript
$(".box").click(function(){
var style = $.param(css($(this))).replace(/&/g,';\n');
$("#show").val(style);
});
function css(a){
var sheets = document.styleSheets, o = {};
for(var i in sheets) {
var rules = sheets[i].rules || sheets[i].cssRules;
for(var r in rules) {
if(a.is(rules[r].selectorText)) {
o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
}
}
}
return o;
}
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) {
var l = css[i].split(": ");
s[l[0].toLowerCase()] = (l[1]);
};
}
return s;
}