Heim > Web-Frontend > js-Tutorial > So klonen Sie Elementstile ohne Tag-Einschränkungen

So klonen Sie Elementstile ohne Tag-Einschränkungen

DDD
Freigeben: 2024-10-22 12:40:02
Original
933 Leute haben es durchsucht

How to Clone Element Styles Without Tag Restrictions

Klonen von Elementstilen für Pseudo-Klonen

Problem:

Sie möchten ein jQuery-Plugin, das emuliert das Klonen von Elementstilen, ohne das Element-Tag einzuschränken. Beispielsweise möchten Sie möglicherweise eine Formulareingabe erstellen, die das visuelle Erscheinungsbild eines vorhandenen Bereichs nachbildet.

Lösung:

Ein geeignetes Plugin für diesen Zweck ist getStyleObject. Dieses Plugin ruft alle berechneten CSS-Stile für ein bestimmtes Element ab, einschließlich derer, die nicht explizit durch Inline-Stile festgelegt wurden.

Implementierung:

<code class="javascript">/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 *
 * Copyright: Unknown, see source link
 * Plugin version by Dakota Schneider (http://hackthetruth.org)
 */

(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);</code>
Nach dem Login kopieren

Verwendung:

Um Stile von einem Element auf ein anderes anzuwenden, verwenden Sie die folgende Syntax:

<code class="javascript">// original element
var original = $("#original");

// cloned element without styling yet
var cloned = original.clone().appendTo(original.parent());

// get styles from original element
var style = original.getStyleObject();

// apply styles to cloned element
cloned.css(style);</code>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo klonen Sie Elementstile ohne Tag-Einschränkungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage