Copy all styles from one element to another

Question

How can i get every styles (even inherited) from an element A to an element B ? in javascript or using jquery.

let's tell i have an element <p class="foo">...</p> and i append new element <div /> which would look like the same, except content.

Answer 1

If you don't care about IE, then you can do this:

var p = document.getElementById("your_p_id");  var div = document.createElement("div");  div.innerHTML = "your div content";  div.style.cssText = document.defaultView.getComputedStyle(p, "").cssText;

#your_p_id {    color: #123124;    background-color: #decbda;  }

<textArea id="your_p_id">Hello world!</textArea>

This works for inline, embedded, and inherited styles.

EDIT: And by "don't care about IE," I of course meant "don't care about anything except Webkit."

UPDATE: This works in the current versions of Chrome(19), Safari(5), Firefox(12), and IE(9). It also works in older versions of some, such as IE8.

Answer 2

Actually, sdleihssirhc's answer will not work on firefox as getComputedStyle(p, "").cssText will return an empty string, it's a longstanding and know bug: https://bugzilla.mozilla.org/show_bug.cgi?id=137687

The solution to also support Firefox is to iterate on getComputedStyle properties and create the CSS string manually:

var clonedNode = document.createElement("div"); const styles = window.getComputedStyle(node); if (styles.cssText !== '') {     clonedNode.style.cssText = styles.cssText; } else {     const cssText = Object.values(styles).reduce(         (css, propertyName) =>             `${css}${propertyName}:${styles.getPropertyValue(                 propertyName             )};`     );      clonedNode.style.cssText = cssText }