JSFiddle - React, Tailwind, and code Playground
HTML
<div id="demo" style="background-color: #0f0; color: purple; -moz-transition: all 1s linear;" class="stuff">One</div>
<div id="demo2">Two</div>
CSS
.stuff {
width: 15em;
height: 32px;
position: relative;
background-color: blue;
}
JavaScript
function getCamel(str) {
return str.replace(/^(-\w)/, function(m) {
return m.substring(1).toLowerCase();
}).replace(/(-\w)/g, function(m) {
return m.substring(1).toUpperCase();
});
}
function getAllStyles(elm) {
var result = {};
if(window.getComputedStyle) {
var styles = window.getComputedStyle(elm, null);
for(var i=0; i<styles.length; i++) {
var val = styles.getPropertyValue(styles[i]);
var key = getCamel(styles[i]);
if(val != "")
result[key] = val;
}
} else if(elm.style) {
for(var i=0; i<elm.style.length; i++) {
var key = getCamel(elm.style[i]);
var val = elm.style[key];
if(val != "")
result[key] = val;
}
}
return result;
}
function copyAllStyles(srcElm, dstElm) {
var styles = getAllStyles(srcElm);
for(var key in styles)
if(styles.hasOwnProperty(key)) {
dstElm.style[key] = styles[key];
if(key == "backgroundColor")
console.log(key, styles[key], dstElm.style.backgroundColor);
}
}
var src = document.getElementById("demo");
var dst = document.getElementById("demo2");
window.setTimeout(function(){
copyAllStyles(src, dst);
}, 2000);