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.

(But no one would be putting a
inside a
would they? - because everyone validates their code, so they would have already found the error ;-) — edeverett, Dec 20 '10 at 20:17

score 61 · Answer 1 · edited Jan 11 '19 at 11:04

61

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.

edited Jan 11 '19 at 11:04

Ruslan López

4,433
2
26
37

answered Dec 20 '10 at 22:23

sdleihssirhc

42,000
6
53
67

1

You may also need to add something like: someElement.appendChild(div); – NoelHunter Aug 07 '13 at 13:19
4

why not use `window.getComputedStyle` rather than `document.defaultView`, which points to the same thing? The use of the global window variable is much more common. – Tom Aug 17 '14 at 06:02
Could you make a test case? It does nothing for me (FF 33.1). Maybe I'm expecting it to do something it doesn't? – Tomáš Zato Dec 03 '14 at 05:21
2

According to https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle: In many code samples online, getComputedStyle is used from the document.defaultView object. In nearly all cases, this is needless, as getComputedStyle exists on the window object as well. It's likely the defaultView pattern was some combination of (1) folks not wanting to write a spec for window and (2) making an API that was also usable in Java. However, there is a single case where the defaultView's method must be used: when using Firefox 3.6 to access framed styles. – Aaronius Oct 14 '15 at 04:33

score 17 · Answer 2 · edited Aug 23 '20 at 07:27

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
}

`Object.values(styles)` returns an array of **353** elements on Firefox (78.0.2), **833** elements on Chrome (84.0.4147.125), and **923** elements on Safari (13.1.2). `Array.from(styles)` returns **353**, **317**, and **491** elements on Firefox, Chrome, and Safari respectively, so I'd recommend changing to `Array.from`. — spenceryue, Aug 19 '20 at 05:45

score 1 · Answer 3 · edited Jan 11 '19 at 11:10

1

Try to copy every CSS-properties like this:

$("#target").css("border", $("#source").css("border"));
$("#target").css("background", $("#source").css("background"));

#source {
  background-color: #dfeacb !important;
  color: #bbae4e !important;
  border: 1px solid green !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textArea id="source">Hello world!</textArea>
<textArea id="target">Hello world!</textArea>

Why not? you can create the dictionary that may consists of all properties.

edited Jan 11 '19 at 11:10

Ruslan López

4,433
2
26
37

answered Dec 20 '10 at 20:30

Jean Louis

1,485
8
18
33

2

it may be okey to do this once like this, but in a loop, this is really not smart. Since your grabbing each property separate and setting it separate as well. – japrescott Apr 11 '13 at 16:32
This will be especially slow if the element is already part of the document. – Tomáš Zato Dec 03 '14 at 05:18

Copy all styles from one element to another

3 Answers3

Linked