Question

<style>
.mainclass{
width:900px;
color:red;
}
</style>
<div class="mainclass">
this is test text
</div>

Is there any way/possible in JavaScript that i can actually read all the css properties that are getting applied to the element ? like say el.style.color/width should actually return the style that is getting set/applied to this element.

I would like to do this so that dom elements can be iterated to find out widths applied to elements and convert it to % for making responsive UI.

Answer 1

If you could use jQuery, $(…).css() solves your problem.

var color = $('#yourid').css("color");

If you don’t want jQuery you can use getComputedStyle on the element. See http://www.javascriptkit.com/dhtmltutors/dhtmlcascade4.shtml for cross-browser solutions.