Rumah > hujung hadapan web > tutorial js > Cara Mengklon Gaya Elemen Tanpa Sekatan Tag

Cara Mengklon Gaya Elemen Tanpa Sekatan Tag

DDD
Lepaskan: 2024-10-22 12:40:02
asal
983 orang telah melayarinya

How to Clone Element Styles Without Tag Restrictions

Gaya Elemen Pengklonan untuk Pengklonan Pseudo

Isu:

Anda mahukan pemalam jQuery yang meniru gaya elemen pengklonan tanpa menyekat tag elemen. Sebagai contoh, anda mungkin ingin mencipta input borang yang mereplikasi penampilan visual rentang sedia ada.

Penyelesaian:

Pemalam yang sesuai untuk tujuan ini ialah getStyleObject. Pemalam ini mendapatkan semula semua gaya CSS yang dikira untuk elemen tertentu, termasuk yang tidak ditetapkan secara eksplisit melalui gaya sebaris.

Pelaksanaan:

<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>
Salin selepas log masuk

Penggunaan:

Untuk menggunakan gaya daripada satu elemen ke elemen lain, gunakan sintaks berikut:

<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>
Salin selepas log masuk

Atas ialah kandungan terperinci Cara Mengklon Gaya Elemen Tanpa Sekatan Tag. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan