Dupliquer un élément (et son style) avec JavaScript

Pour une bibliothèque JavaScript je suis la mise en œuvre, j'ai besoin de duplication d'un élément qui a exactement le même style que l'original. Bien que j'ai gagné assez décent connaissance de JavaScript, un langage de programmation, tout en le développant, je suis encore un DOM scripting newbie, donc, tous les conseils sur la façon dont cela peut être réalisé, il serait très utile (et il doit être fait sans l'aide de toute autre bibliothèque JavaScript).

Je vous remercie beaucoup à l'avance.

Edit: cloneNode(true) ne pas cloner le calculées style de l'élément. Disons que vous avez le code HTML suivant:

<body>
  <p id="origin">This is the first paragraph.</p>
  <div id="destination">
    <p>The cloned paragraph is below:</p>
  </div>
</body>

Et un peu de style comme:

body > p {
  font-size: 1.4em;
  font-family: Georgia;
  padding: 2em;
  background: rgb(165, 177, 33);
  color: rgb(66, 52, 49);
}

Si vous venez de clone de l'élément, en utilisant quelque chose comme:

var element = document.getElementById('origin');
var copy = element.cloneNode(true);
var destination = document.getElementById('destination');
destination.appendChild(copy);

Styles ne sont pas dupliqués.

source d'informationauteur acebal

  1. 24

    Non seulement aurez-vous besoin de cloner, mais vous aurez probablement envie de faire profonde clonage.

    node.cloneNode(true);

    Documentation est ici.

    Si profonde est définie sur false, aucun des
    les nœuds enfants sont clonés. Le texte
    le nœud contient n'est pas cloné
    soit, comme il est contenu dans l'un ou
    enfant de plus les nœuds de Texte.

    Si profonde évalue à true, l'ensemble de la
    la sous-arborescence (y compris de texte qui peut être en
    enfant nœuds de Texte) est copié. Pour
    nœuds vides (par exemple, IMG et ENTRÉE
    éléments) qu'il n'a pas d'importance si
    profonde est définie à true ou à false, mais vous
    toujours fournir une valeur.

    Edit: OP états qui node.cloneNode(true) n'était pas de copier les styles. Voici un test simple qui indique le contraire (et de l'effet recherché) utilisant jQuery et de la norme API DOM:

    var node = $("#d1");

//Add some arbitrary styles
node.css("height", "100px"); 
node.css("border", "1px solid red");

//jQuery clone
$("body").append(node.clone(true));

//Standard DOM clone (use node[0] to get to actual DOM node)
$("body").append(node[0].cloneNode(true));

    Les résultats sont visibles ici: http://jsbin.com/egice3/

    Edit 2

    Tu aurais mentionné qu'avant 😉 Calculé style est complètement différents. Changer votre sélecteur CSS ou appliquer ce style en tant que classe, et vous aurez une solution.

    Modifier 3

    Parce que ce problème est légitime que je n'ai pas trouvé de bonnes solutions, il me gênait assez pour venir jusqu'à la suivante. Il n'est pas particulièrement gracieux, mais il fait le travail (testé dans FF 3.5).

    var realStyle = function(_elem, _style) {
    var computedStyle;
    if ( typeof _elem.currentStyle != 'undefined' ) {
        computedStyle = _elem.currentStyle;
    } else {
        computedStyle = document.defaultView.getComputedStyle(_elem, null);
    }

    return _style ? computedStyle[_style] : computedStyle;
};

var copyComputedStyle = function(src, dest) {
    var s = realStyle(src);
    for ( var i in s ) {
        //Do not use `hasOwnProperty`, nothing will get copied
        if ( typeof i == "string" && i != "cssText" && !/\d/.test(i) ) {
            //The try is for setter only properties
            try {
                dest.style[i] = s[i];
                //`fontSize` comes before `font` If `font` is empty, `fontSize` gets
                //overwritten.  So make sure to reset this property. (hackyhackhack)
                //Other properties may need similar treatment
                if ( i == "font" ) {
                    dest.style.fontSize = s.fontSize;
                }
            } catch (e) {}
        }
    }
};

var element = document.getElementById('origin');
var copy = element.cloneNode(true);
var destination = document.getElementById('destination');
destination.appendChild(copy);
copyComputedStyle(element, copy);

    Voir PPK de l'article intitulé Obtenir Les Styles pour plus d'informations et quelques mises en garde.

  2. 4

    Après avoir regardé un couple de bonnes solutions sur le WEB, j'ai décidé de regrouper tous les meilleurs aspects de chacun et de venir avec ce.

    J'ai quitté ma solution dans la plaine super rapide de Javascript, de sorte que tout le monde peut se traduire à leur dernier et excellent JS saveur du mois.

    Représentant la vanille de manille.....

     * @problem: Sometimes .cloneNode(true) doesn't copy the styles and your are left
 * with everything copied but no styling applied to the clonedNode (it looks plain /ugly). Solution:
 * 
 * @solution: call synchronizeCssStyles to copy styles from source (src) element to
 * destination (dest) element.
 * 
 * @author: Luigi D'Amico (www.8bitplatoon.com)
 * 
 */
function synchronizeCssStyles(src, destination, recursively) {

    //if recursively = true, then we assume the src dom structure and destination dom structure are identical (ie: cloneNode was used)

    //window.getComputedStyle vs document.defaultView.getComputedStyle 
    //@TBD: also check for compatibility on IE/Edge 
    destination.style.cssText = document.defaultView.getComputedStyle(src, "").cssText;

    if (recursively) {
        var vSrcElements = src.getElementsByTagName("*");
        var vDstElements = destination.getElementsByTagName("*");

        for (var i = vSrcElements.length; i--;) {
            var vSrcElement = vSrcElements[i];
            var vDstElement = vDstElements[i];
//         console.log(i + " >> " + vSrcElement + " :: " + vDstElement);
            vDstElement.style.cssText = document.defaultView.getComputedStyle(vSrcElement, "").cssText;
        }
    }
}