Bisakah jQuery mendapatkan semua gaya CSS yang terkait dengan suatu elemen?

Apakah ada cara di jQuery untuk mendapatkan semua CSS dari elemen yang ada dan menerapkannya ke yang lain tanpa mendaftar semuanya?

Saya tahu itu akan berhasil jika mereka adalah atribut gaya attr(), tetapi semua gaya saya berada di lembar gaya eksternal.

Beberapa tahun terlambat, tetapi di sini ada solusi yang mengambil gaya inline dan gaya eksternal:

function css(a) {
    var sheets = document.styleSheets, o = {};
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (a.is(rules[r].selectorText)) {
                o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
            }
        }
    }
    return o;
}

function css2json(css) {
    var s = {};
    if (!css) return s;
    if (css instanceof CSSStyleDeclaration) {
        for (var i in css) {
            if ((css[i]).toLowerCase) {
                s[(css[i]).toLowerCase()] = (css[css[i]]);
            }
        }
    } else if (typeof css == "string") {
        css = css.split("; ");
        for (var i in css) {
            var l = css[i].split(": ");
            s[l[0].toLowerCase()] = (l[1]);
        }
    }
    return s;
}

Lulus objek jQuery ke css()dan itu akan mengembalikan objek, yang kemudian dapat Anda pasang kembali ke jQuery's $().css(), mis:

var style = css($("#elementToGetAllCSS"));
$("#elementToPutStyleInto").css(style);

:)

Dua tahun terlambat, tapi saya punya solusi yang Anda cari. Tidak bermaksud mengambil kredit dari pembuat aslinya , berikut ini adalah plugin yang saya temukan berfungsi sangat baik untuk apa yang Anda butuhkan, tetapi mendapatkan semua gaya yang mungkin di semua browser, bahkan IE.

Peringatan: Kode ini menghasilkan banyak output, dan harus digunakan dengan hemat. Itu tidak hanya menyalin semua properti CSS standar, tetapi juga semua properti CSS vendor untuk browser itu.

jquery.getStyleObject.js:

/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 */

(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, l = style.length; i < l; i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            };
            return returns;
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                returns[prop] = style[prop];
            };
            return returns;
        };
        return this.css();
    }
})(jQuery);

Penggunaan dasar cukup sederhana, tapi dia juga menulis fungsi untuk itu:

$.fn.copyCSS = function(source){
  var styles = $(source).getStyleObject();
  this.css(styles);
}

Semoga itu bisa membantu.

Mengapa tidak menggunakan .styleelemen DOM ? Ini adalah objek yang berisi anggota seperti widthdan backgroundColor.

Saya telah mencoba berbagai solusi. Ini adalah satu-satunya yang bekerja untuk saya karena mampu mengambil gaya yang diterapkan di tingkat kelas dan gaya yang secara langsung dikaitkan dengan elemen. Jadi font ditetapkan pada level file css dan satu sebagai atribut style; itu mengembalikan font yang benar.

Itu sederhana! (Maaf, tidak dapat menemukan tempat saya awalnya menemukannya)

//-- html object
var element = htmlObject; //e.g document.getElementById
//-- or jquery object
var element = htmlObject[0]; //e.g $(selector)

var stylearray = document.defaultView.getComputedStyle(element, null);
var font = stylearray["font-family"]

Atau Anda dapat membuat daftar semua gaya dengan bersepeda melalui array

for (var key in stylearray) {
console.log(key + ': ' + stylearray[key];
}

Solusi @ marknadal tidak mengambil properti yang ditulis dgn tanda penghubung untuk saya (misalnya max-width), tetapi mengubah forloop pertama css2json()membuatnya bekerja, dan saya curiga melakukan iterasi yang lebih sedikit:

for (var i = 0; i < css.length; i += 1) {
    s[css[i]] = css.getPropertyValue(css[i]);
}

Loop melalui lengthalih-alih in,mengambil melalui getPropertyValue()alih-alihtoLowerCase().