JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Cтили</title>
</head>
<body>
<div id="rules"></div>
</body>
</html>
JavaScript
var elementList = new Array("B","I","U","HR"),
index = elementList.length,
rules = document.getElementById('rules');
while(index--){
//создаем элемент
element = document.createElement(elementList[index]);
document.body.appendChild(element);
mstyle = element.style;
//заглавие
title = document.createElement("H1");
title.appendChild(document.createTextNode(elementList[index]));
rules.appendChild(title);
//табличка
table = document.createElement("TABLE");
rules.appendChild(table);
table.style.width="100%";
for(var i in mstyle){
value = getStyle(element,i);
if(value!=null&&value!=""){
tr = document.createElement("TR");
td1 = document.createElement("TD");
td2 = document.createElement("TD");
td1.appendChild(document.createTextNode(i));
td2.appendChild(document.createTextNode(value));
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
}
}
element.parentNode.removeChild(element);
}
function getStyle(el,styleProp){
var x = el;
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}