Comment pseudo-cloner des styles d'éléments à l'aide de jQuery ?

Plugin jQuery pour cloner des styles d'éléments vers un pseudo-clone

La création d'un pseudo clone d'un élément avec différentes balises peut être réalisée en utilisant différentes approches dans jQuery. Voici une explication détaillée et des solutions :

Plugin getComputedStyle de jQuery

Pour l'exigence spécifique de renvoyer un objet de styles calculés pour un élément, vous pouvez utiliser le plugin jQuery getStyleObject , qui récupère tous les styles possibles à partir de n'importe quel élément, y compris les navigateurs IE.

Utilisation :

var style = $("#original").getStyleObject();

Modification de la méthode CSS de jQuery

Une autre approche est pour modifier la méthode CSS de jQuery comme suit :

jQuery.fn.css2 = jQuery.fn.css;
jQuery.fn.css = function() {
    if (arguments.length) return jQuery.fn.css2.apply(this, arguments);
    var styleObj = {};
    // List of style properties to get
    var styleList = ['font-family','font-size','font-weight','font-style','color',
    'text-transform','text-decoration','letter-spacing','word-spacing',
    'line-height','text-align','vertical-align','direction','background-color',
    'background-image','background-repeat','background-position',
    'background-attachment','opacity','width','height','top','right','bottom',
    'left','margin-top','margin-right','margin-bottom','margin-left',
    'padding-top','padding-right','padding-bottom','padding-left',
    'border-top-width','border-right-width','border-bottom-width',
    'border-left-width','border-top-color','border-right-color',
    'border-bottom-color','border-left-color','border-top-style',
    'border-right-style','border-bottom-style','border-left-style','position',
    'display','visibility','z-index','overflow-x','overflow-y','white-space',
    'clip','float','clear','cursor','list-style-image','list-style-position',
    'list-style-type','marker-offset'];
    for (var i = 0; i < styleList.length; i++) {
        styleObj[styleList[i]] = jQuery.fn.css2.call(this, styleList[i]);
    }
    return styleObj;
};

Avec cette modification, vous pouvez obtenir l'objet de style calculé pour le premier élément correspondant en appelant :

var style = $('#original').css();

Autre édition Approches

Pour le problème général du pseudo clonage d'un élément pour l'édition en ligne, envisagez ces approches alternatives :

• jQuery.clone() avec .replaceWith() : Clonez l'élément d'origine, modifiez-le pour en faire un champ de saisie et remplacez l'original par le clone.
• jQuery.replaceWith() par .data() : Remplacez le élément d'origine avec un champ de saisie, stockant les données de l'élément précédent dans un attribut de données. Après l'édition, remplacez l'entrée par les données.
• Attribut ContentEditable : Basculez l'attribut contentEditable de l'élément pour permettre l'édition directe en ligne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!