Copier tous les styles d'un élément à un autre

Question

Comment puis-je récupérer tous les styles (même hérités) d'un élément A vers un élément B ? en javascript ou en utilisant jquery.

disons que j'ai un élément <p class="foo">...</p> et j'ajoute un nouvel élément <div /> qui ressemblerait à la même chose, à l'exception du contenu.

Answer 1

Si vous ne vous souciez pas de l'IE, vous pouvez le faire :

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>

Cela fonctionne pour les styles en ligne, intégrés et hérités.

EDIT : Et par "se foutre d'IE", je voulais bien sûr dire "se foutre de tout sauf de Webkit".

UPDATE : Cela fonctionne dans les versions actuelles de Chrome(19), Safari(5), Firefox(12), et IE(9). Il fonctionne également dans les anciennes versions de certains, comme IE8.

Answer 2

En fait, La réponse de sdleihssirhc ne fonctionnera pas sur firefox comme getComputedStyle(p, "").cssText retournera une chaîne vide, c'est un bogue connu depuis longtemps : https://bugzilla.mozilla.org/show_bug.cgi?id=137687

La solution pour supporter également Firefox est d'itérer sur getComputedStyle et créer manuellement la chaîne CSS :

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
}

Answer 3

Essayez de copier toutes les propriétés CSS comme ceci :

$("#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>

Pourquoi pas ? Vous pouvez créer le dictionnaire qui peut être composé de toutes les propriétés.