JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="dragContainer">
  <div class="list_1">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
    </ul>
  </div>
  <div class="list_2">
  <ul>
    <li>Locked</li>
    <li>Thing</li>
  </ul>
  </div>
</div>

<div class="stylethis">
  Style Here
</div>

CSS

.dragContainer, .list_1, .list_2 {
  margin: 5px;
  padding: 5px;
  border: solid 1px gray;
  border-radius: 3px;
}
.dragContainer {
  display: flex;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  border: solid 1px gray;
  border-radius: 3px;
  padding: 5px;
  width: 200px;
  overflow: hidden;
  background-color: pink;
}

JavaScript

function camelize (a, b) {
  return b.toUpperCase();
}

function copyStyles (source) {
  const dom = typeof source === 'string' ? document.querySelector(source) : source;
  console.log('dom', dom);
  const inStyles = window.getComputedStyle(dom, null);
  const outStyles = {};
  console.log('inStyles', inStyles);
  //
  for (let prop in inStyles) {
    const camel = prop.replace(/\-([a-z])/, camelize);
    const val = inStyles.getPropertyValue(prop) || inStyles[prop];
    if (!val) {
    	console.log('no val');
    } else {
    	console.log(camel, ': ', val);
    }
    outStyles[camel] = val;
  }
  console.log('outStyles', outStyles);
  const destElm = document.querySelector('.stylethis');
  for (let prop in outStyles) {
  	destElm.style[prop] = outStyles[prop];
  }
  
}

copyStyles(document.querySelectorAll('.list_1 li')[0]);

(function($){
    $.fn.copyCSS = function (source) {
        var dom = $(source).get(0);
        var dest = {};
        var style, prop;
        if (window.getComputedStyle) {
            var camelize = function (a, b) {
                    return b.toUpperCase();
            };
            if (style = window.getComputedStyle(dom, null)) {
                var camel, val;
                if (style.length) {
                    for (var i = 0, l = style.length; i < l; i++) {
                        prop = style[i];
                        camel = prop.replace(/\-([a-z])/, camelize);
                        val = style.getPropertyValue(prop);
                        dest[camel] = val;
                    }
                } else {
                    for (prop in style) {
                        camel = prop.replace(/\-([a-z])/, camelize);
                        val = style.getPropertyValue(prop) || style[prop];
                        dest[camel] = val;
                    }
                }
                return this.css(dest);
            }
        }
        if (style = dom.currentStyle) {
            for (prop in style) {
              ...