JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<div id="foo"></div>

CSS

#foo{
    display: inline-block;
    padding: 2px 1.5px;
    border-top: 1px black solid;
    border-left: 1.5px red dotted;
    border-right: .8px green dashed;
    border-bottom: 1px blue solid;
	  margin: 3px 2px 2px 4px;
}

JavaScript

"use strict";

function copyStyle(source, shorthand) {
  var computed = window.getComputedStyle(source, null), resp = [];
  for (var i = computed.length; i--;) {
    var property = camelize(computed[i]);
    if (property.indexOf(shorthand) > -1) {
      resp.push(computed[property]);
    }
  }
  return resp.join(" ");
}

function camelize(text) {
  return text.replace(/-+(.)?/g, function (match, chr) {
    return chr ? chr.toUpperCase() : '';
  });
}

var div = document.querySelector("#foo");
div.innerHTML = "Margin: " + copyStyle(div, "margin");
div.innerHTML += "<br />Border: " + copyStyle(div, "border");