Wie kann ich Elementstile mit jQuery pseudoklonen?

jQuery-Plugin zum Klonen von Elementstilen in einen Pseudoklon

Das Erstellen eines Pseudoklons eines Elements mit verschiedenen Tags kann mit verschiedenen Ansätzen erreicht werden in jQuery. Hier finden Sie eine ausführliche Erklärung und Lösungen:

getComputedStyle-Plugin von jQuery

Für die spezielle Anforderung, ein Objekt mit berechneten Stilen für ein Element zurückzugeben, können Sie das jQuery-getStyleObject-Plugin verwenden , das alle möglichen Stile von jedem Element abruft, einschließlich IE-Browsern.

Verwendung:

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

Ändern der CSS-Methode von jQuery

Ein anderer Ansatz ist So ändern Sie die CSS-Methode von jQuery wie folgt:

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;
};

Mit dieser Änderung können Sie das berechnete Stilobjekt für das erste übereinstimmende Element abrufen, indem Sie Folgendes aufrufen:

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

Andere Bearbeitung Ansätze

Für das allgemeine Problem des Pseudoklonens eines Elements für die Inline-Bearbeitung sollten Sie diese alternativen Ansätze in Betracht ziehen:

• jQuery.clone() mit .replaceWith() : Klonen Sie das ursprüngliche Element, ändern Sie es in ein Eingabefeld und ersetzen Sie das Original durch den Klon.
• jQuery.replaceWith() durch .data(): Ersetzen Sie das Originalelement mit einem Eingabefeld, das die Daten des vorherigen Elements in einem Datenattribut speichert. Ersetzen Sie nach der Bearbeitung die Eingabe durch die Daten.
• ContentEditable-Attribut: Schalten Sie das contentEditable-Attribut des Elements um, um eine direkte Inline-Bearbeitung zu ermöglichen.

Das obige ist der detaillierte Inhalt vonWie kann ich Elementstile mit jQuery pseudoklonen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!