JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<head>
	<style>
		#srcDiv {
			width: 450px;
			font-family: sans-serif;
			text-align: justify;
			justify-content: center;
			color: green;
		}
		
		#resDiv {
			height: 300px;
			overflow: scroll;
		}
	</style>
	
	<script>
		function getCSS(element) {
			var css_data = '';
			var css_obj = getComputedStyle(element);
		
			for (var i = 0; i < css_obj.length; i++) {
				css_data +=
					css_obj[i] + ':' +
					css_obj.getPropertyValue(css_obj[i])
					+ ';<br>';
			}
			document.getElementById('resDiv')
					.innerHTML = css_data;
			return;
		}
	</script>
</head>
<body>
	<img src="logo.png" /><br />
	
	<h3>
		How to get all the
		CSS of an element
	</h3>
	<br />
	
	<div id="srcDiv">
		This is a demo paragraph for
		explaining "How to get all the
		CSS of an element". Properties
		which are applied on this
		division will appear in the
		next division on pressing the
		button below.
	</div>
	<br /><br />
	
	<button onclick="getCSS(document
			.getElementById('srcDiv'))">
		Get CSS
	</button>
	<br /><br />
	
	<div id="resDiv"></div>
</body