Wie kann jQuery Elementstile mithilfe von Pseudoklonen und berechneten Stilen klonen?

jQuery-CSS-Plugin für Pseudo-Klon-Elementstile

Einführung

Bei der Arbeit mit jQuery ist es manchmal notwendig, auf die berechneten Stile zuzugreifen und diese zu bearbeiten eines Elements. Während vorhandene jQuery-Methoden wie width() eine einfache Manipulation bestimmter Eigenschaften ermöglichen, besteht Bedarf an einem umfassenderen Ansatz zum Kopieren und Anwenden aller berechneten Stile.

Problemstellung

Die zentrale Herausforderung dreht sich um Es geht darum, ein jQuery-Plugin oder einen jQuery-Ansatz zu finden, der Folgendes kann:

• Ein Objekt zurückgeben, das die berechneten Stile des ersten übereinstimmenden Elements enthält
• Zulassen, dass dieses Objekt mithilfe von CSS auf andere Elemente angewendet wird( )-Methode
• Erleichtert das Pseudo-Klonen von Elementen, bei dem ein anderes Tag verwendet wird, aber das gleiche Erscheinungsbild beibehält

Lösung

Obwohl ein offensichtlicher Bedarf besteht, ist sie leicht verfügbar Das jQuery-Plugin für diese Aufgabe wurde noch nicht entwickelt. Es gibt jedoch benutzerdefinierte Lösungen, die dieses Problem effektiv lösen.

Eine dieser Lösungen besteht darin, die Standardmethode css() zu erweitern, indem ihr Verhalten überschrieben wird. Wenn keine Argumente angegeben werden, wird ein Objekt mit allen berechneten Stilen zurückgegeben.

Erweiterte CSS-Methode:

jQuery.fn.css2 = jQuery.fn.css;
jQuery.fn.css = function() {
    if (arguments.length) return jQuery.fn.css2.apply(this, arguments);
    var attr = ['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'];
    var len = attr.length, obj = {};
    for (var i = 0; i < len; i++) 
        obj[attr[i]] = jQuery.fn.css2.call(this, attr[i]);
    return obj;
}

Eine weitere bemerkenswerte Lösung ist ein jQuery-Plugin namens getStyleObject. Es ruft alle möglichen Stile ab, einschließlich derjenigen, auf die nicht über die Standardmethode css() zugegriffen werden kann:

getStyleObject Plugin:

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            }
            style = window.getComputedStyle(dom, null);
            for(var i=0;i<style.length;i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            }
            return returns;
        }
        if(dom.currentStyle){
            style = dom.currentStyle;
            for(var prop in style){
                returns[prop] = style[prop];
            }
            return returns;
        }
        return this.css();
    }
})(jQuery);

Fazit

Beide Mit diesen Lösungen können Sie berechnete Stile abrufen und auf Elemente anwenden, was eine größere Flexibilität und Kontrolle über das Erscheinungsbild von Elementen und das Pseudo-Klonen bietet. Die Wahl der Lösung hängt von den Kompatibilitätsanforderungen und den spezifischen Anforderungen Ihres Projekts ab.

Das obige ist der detaillierte Inhalt vonWie kann jQuery Elementstile mithilfe von Pseudoklonen und berechneten Stilen klonen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!