how to get all the calculated styles of an element with jQuery ?

Question

I want to copy all the calculated css of an element and apply it to another element. By calculated style, I mean for examply if the element's width is 100%, but it's parent's width is 200px, the elements calculated width would be 200px. how can I access all of these styles for an element ?

Answer 1

Use computed-style. Here's a simple tutorial: Get Computed Style

And as for jquery, it can help you get a reference to the source and target element and apply the css rule easily. let's say you are only interested in two properties, width and height, then you can use code along the lines of:

var oSource = $('#source');
var sWidth  = document.defaultView.getComputedStyle(oSource, null).width;
var sHeight = document.defaultView.getComputedStyle(oSource, null).hight;
$('#target').css('width', sWidth).css('height', sHeight);

Answer 2

after further research using Majid's answer, I found out that Jquery's ".css" method return computed style as well, and is better because it accounts for browser difference http://api.jquery.com/css/