13

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 ?

Elijah Manor
  • 17,923
  • 17
  • 72
  • 79
Sina Fathieh
  • 1,727
  • 1
  • 20
  • 35
  • 1
    Found an answer that gives *every* style declaration [here](http://stackoverflow.com/questions/2558426/getcomputedstyle-or-cssmap-to-get-every-style-declaration#answer-2561294), which I think is what the OP said they were after. – Barney Nov 23 '12 at 15:52

2 Answers2

14

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/

Sina Fathieh
  • 1,727
  • 1
  • 20
  • 35
  • 3
    Yeah! Silly me! Why did I try to get the spoon to mouth taking that long route. Morale of the story: Before looking elsewhere always check the tools you already have. – Majid Fouladpour Jan 28 '10 at 01:48
  • @hakim-sina Can you explain this? I don't understand how to get the computed style here with jQuery's `css()`. – Smamatti Mar 07 '12 at 22:09
  • 1
    @ Smamatti : can you be more specific ? in general to get a calculated style, for example width ( the example that is mentioned above in the question) all you need to do is pass it to css function like this : var width = $("element").css("width") – Sina Fathieh Mar 08 '12 at 13:05
  • I find this will not return styles I have set in a stylesheet? :s working with css position specifically in this case. – Josh Mc Oct 24 '12 at 21:51
  • Nevermind, it was not giving me the stylesheet style, because I had not yet appended the element to the document (so no styles were yet applied) – Josh Mc Oct 24 '12 at 21:53
  • 2
    `$(element).css()` returns the following: `TypeError: Cannot call method 'replace' of undefined` It needs to be passed one argument to get the computed style for that property, and doesn't return a map of computed styles. – Barney Nov 23 '12 at 13:39
  • 1
    Well, It does not really return the same value as `getComputedStyle`. for example if the computed style is '10.75px' `css` function will return '11px'. – Bakhshi Jul 01 '14 at 04:57
  • I'm also facing `TypeError:Cannot call method 'replace' of undefined` I want to get all the computed style of the selected element – mehmood khan Sep 30 '20 at 09:17
9

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);
Sergio
  • 28,539
  • 11
  • 85
  • 132
Majid Fouladpour
  • 29,356
  • 21
  • 76
  • 127