Pemalam CSS jQuery untuk Gaya Elemen Pengklonan Pseudo

Pengenalan

Apabila bekerja dengan jQuery, kadangkala ia menjadi perlu untuk mengakses dan memanipulasi gaya yang dikira daripada sesuatu unsur. Walaupun kaedah jQuery sedia ada seperti width() membenarkan manipulasi mudah sifat tertentu, terdapat keperluan untuk pendekatan yang lebih komprehensif untuk menyalin dan menggunakan semua gaya yang dikira.

Pernyataan Masalah

Cabaran utama berputar sekitar mencari pemalam atau pendekatan jQuery yang boleh:

• Mengembalikan objek yang mengandungi gaya pengiraan elemen pertama yang dipadankan
• Benarkan objek ini digunakan pada elemen lain menggunakan css( ) kaedah
• Memudahkan pengklonan pseudo unsur-unsur, di mana tag yang berbeza digunakan tetapi mengekalkan penampilan yang sama

Penyelesaian

Walaupun merupakan keperluan yang jelas, ia mudah didapati Pemalam jQuery untuk tugas ini masih belum dibangunkan. Walau bagaimanapun, terdapat penyelesaian tersuai yang menangani masalah ini dengan berkesan.

Salah satu penyelesaian sedemikian melibatkan melanjutkan kaedah css() standard dengan mengatasi kelakuannya. Jika tiada hujah diberikan, ia mengembalikan objek dengan semua gaya yang dikira.

Kaedah CSS Lanjutan:

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

Satu lagi penyelesaian yang ketara ialah pemalam jQuery yang dipanggil getStyleObject. Ia mendapatkan semula semua gaya yang mungkin, termasuk yang tidak boleh diakses melalui kaedah css() standard:

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

Kesimpulan

Kedua-duanya daripada penyelesaian ini membolehkan anda memperoleh dan menggunakan gaya yang dikira pada elemen, memberikan fleksibiliti dan kawalan yang lebih besar ke atas penampilan elemen dan pengklonan pseudo. Pilihan penyelesaian bergantung pada keperluan keserasian dan keperluan khusus projek anda.

Atas ialah kandungan terperinci Bagaimanakah Gaya Elemen Klon jQuery boleh menggunakan Pengklonan Pseudo dan Gaya Dikira?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!