Bagaimana untuk Pseudo Clone Element Styles Menggunakan jQuery?

Pemalam jQuery untuk Pengklonan Gaya Elemen kepada Klon Pseudo

Mencipta klon pseudo bagi elemen dengan tag yang berbeza boleh dicapai menggunakan pelbagai pendekatan dalam jQuery. Berikut ialah penjelasan dan penyelesaian terperinci:

JQuery's getComputedStyle Plugin

Untuk keperluan khusus mengembalikan objek gaya yang dikira untuk elemen, anda boleh menggunakan pemalam jQuery getStyleObject , yang mendapatkan semula semua gaya yang mungkin daripada mana-mana elemen, termasuk pelayar IE.

Penggunaan:

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

Mengubah suai Kaedah CSS jQuery

Pendekatan lain ialah untuk mengubah suai kaedah css jQuery seperti berikut:

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

Dengan pengubahsuaian ini, anda boleh mendapatkan objek gaya yang dikira untuk elemen dipadankan pertama dengan memanggil:

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

Pengeditan Lain Pendekatan

Untuk masalah umum pengklonan pseudo elemen untuk penyuntingan sebaris, pertimbangkan pendekatan alternatif ini:

• jQuery.clone() dengan .replaceWith() : Klonkan elemen asal, ubah suainya menjadi medan input dan gantikan yang asal dengan klon.
• jQuery.replaceWith() dengan .data(): Gantikan elemen asal dengan medan input, menyimpan data elemen sebelumnya dalam atribut data. Selepas mengedit, gantikan input dengan data.
• Atribut Boleh Diedit Kandungan: Togol atribut Boleh diedit kandungan bagi elemen untuk membenarkan pengeditan sebaris terus.

Atas ialah kandungan terperinci Bagaimana untuk Pseudo Clone Element Styles Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!