maneja81/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
#test{
  background: #222;
  color: #fff;
  padding: 25px;
  font-family: 'Open Sans', Arial;
  line-height: 1.6;
  text-align: center;
}
</style>
</head>
<body>
  <div id="test">
    <p>CLick Me and check console to know my CSS ;)</p>
    </div>
<script id="jsbin-javascript">
$(document).ready(function() {

  var css2json = function(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;
	};

	var css = function(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;
	};

    $('#test').on('click', function(){
        var css_rules = css($(this));
        console.log('My CSS Rules Are: ', css_rules);
    });

});
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="test">
    <p>CLick Me and check console to know my CSS ;)</p>
    </div>
</body>
</html></script>

<script id="jsbin-source-css" type="text/css">#test{
  background: #222;
  color: #fff;
  padding: 25px;
  font-family: 'Open Sans', Arial;
  line-height: 1.6;
  text-align: center;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function() {

  var css2json = function(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;
	};

	var css = function(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;
	};

    $('#test').on('click', function(){
        var css_rules = css($(this));
        console.log('My CSS Rules Are: ', css_rules);
    });

});</script></body>
</html>

## jsbin.beyoqe.css
#test{
  background: #222;
  color: #fff;
  padding: 25px;
  font-family: 'Open Sans', Arial;
  line-height: 1.6;
  text-align: center;
}

## jsbin.beyoqe.js
$(document).ready(function() {

  var css2json = function(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;
	};

	var css = function(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;
	};

    $('#test').on('click', function(){
        var css_rules = css($(this));
        console.log('My CSS Rules Are: ', css_rules);
    });

});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	#test{
	background: #222;
	color: #fff;
	padding: 25px;
	font-family: 'Open Sans', Arial;
	line-height: 1.6;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div id="test">
	<p>CLick Me and check console to know my CSS ;)</p>
	</div>
	<script id="jsbin-javascript">
	$(document).ready(function() {

	var css2json = function(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;
	};

	var css = function(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;
	};

	$('#test').on('click', function(){
	var css_rules = css($(this));
	console.log('My CSS Rules Are: ', css_rules);
	});

	});
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="test">
	<p>CLick Me and check console to know my CSS ;)</p>
	</div>
	</body>
	</html></script>

	<script id="jsbin-source-css" type="text/css">#test{
	background: #222;
	color: #fff;
	padding: 25px;
	font-family: 'Open Sans', Arial;
	line-height: 1.6;
	text-align: center;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function() {

	var css2json = function(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;
	};

	var css = function(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;
	};

	$('#test').on('click', function(){
	var css_rules = css($(this));
	console.log('My CSS Rules Are: ', css_rules);
	});

	});</script></body>
	</html>