JSFiddle - React, Tailwind, and code Playground
HTML
<nav id="navigate">
<h1 class="hidden">Navigation</h1>
<div class="row">
<div class="grid_12">
<ul>
<div class="grid_3"></div>
<li><a href="#"><span class="example">HOME</span></a></li>
<li><a href="#"><span class="example">ABOUT</span></a></li>
<li><a href="#"><span class="example">PORTFOLIO</span></a></li>
<li><a href="#"><span class="example">CONTACT</span></a></li>
<div class="grid_3"></div>
</ul>
</div>
</div>
</nav>
CSS
nav{
background-color:#e1b2ff;
height:67px;
font-family:Helvetica, sans-serif;
text-align:center;
font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica;
}
li{list-style:none;}
JavaScript
var nav = $('nav').html();
console.log(JSON.stringify(nav));
$.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) {
dest[prop] = style[prop];
}
return this.css(dest);
}
if (style = dom.style) {
for (prop in style) {
if (typeof style[prop] != 'function') {
dest[prop] = style[prop];
}
}
}
return this.css(dest);
};
$('a').click(function(){
$(this).copyCSS('nav');
});