Is there a JQuery function to give a selected element the same CSS as another element?

Question

I'm wondering whether there is a JQuery function that I can use to apply the CSS from a given element to another element. I'm talking about the exact CSS; nothing more applied due to inheritance.

To be more specific:

<div id="d1">
    <p id="p1">Here is some text.</p>
</div>

<div id="d2">
    <p id="p2">Here is some other text.</p>
    <!-- I want this text in p2 to have the same styling as the text in p1, even after the inheritances of the divs are factored. -->
</div>

<script type="text/javascript">
    $(...).(...); // ??????????????
</script>

If JQuery has such a function, it will save me an hour of trying to use my own stylesheet (I'm using a CMS that has a master style sheet that I can't change) to figuring out how to override/add a million properties.

No, JQuery doesn't have such a function. – kinakuta Sep 19 '14 at 17:53 — kinakuta, Sep 19 '14 at 17:53
I think for that purpose they invented classes :-) – PalDev Sep 19 '14 at 17:56 — PalDev, Sep 19 '14 at 17:56
http://www.xinotes.net/notes/note/1817/ – Len_D Sep 19 '14 at 17:59 — Len_D, Sep 19 '14 at 17:59

score 1 · Answer 1 · answered Sep 19 '14 at 18:00

Though not compatible with Opera, this should accomplish your goal: http://jsfiddle.net/6o3f3em6/1/

Use getComputedStyle to get all CSS attributes of target element
Stringify the object into CSS
Apply the cssText to the receiving element

Here is the relevant code:

var target = document.querySelector('#p1');
var receiver = document.querySelector('#p2');
var styles   = getComputedStyle(target);

var cssText = '';
for(var style in styles){
    cssText += style+':'+styles[style];
}

receiver.style.cssText = cssText;

Is there a JQuery function to give a selected element the same CSS as another element?

1 Answers1