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 ?
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).height;
$('#target').css('width', sWidth).css('height', sHeight);