Is there a JavaScript tool available that can extract the style information from HTML code?
For instance, when given the following HTML snippet, it would output a style block containing all the computed styles applied to each of those elements?
Input...
<div class="container no-wrap">
<p>foo</p>
<footer class="thumbnail">
<span>bar</span>
</footer>
</div>
Output...
// This library/utility has analyzed all elements and identified all styling rules
// applied to those elements and associated classes
<style type="text/css">
div {
margin: 0;
background-color: red;
}
p {
font-size: 16px;
font-family: arial;
}
span {
color: #fff;
}
footer {
}
.container {
...
}
.no-wrap {
....
}
.thumbnail {
...
}
</style>