JQuery bir öğeyle ilişkili tüm CSS stillerini alabilir mi?

JQuery'de varolan bir öğeden tüm CSS'leri almanın ve tümünü listelemeden başka bir CSS'ye uygulamanın bir yolu var mı?

Bir stil özniteliği olsaydı işe yarayacağını biliyorum attr(), ancak tüm tarzlarım harici bir stil sayfasında.

Birkaç yıl geç, ancak burada hem satır içi stili hem de harici stili alan bir çözüm var:

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

Bir jQuery nesnesini ilettiğinizde css(), daha sonra yeniden jQuery's'e bağlayabileceğiniz bir nesne döndürülür $().css():

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

:)

İki yıl geç, ama aradığınız çözüm var. Orijinal yazardan kredi almak istemeyen , burada bulduğum bir eklenti, ihtiyacınız olan şey için son derece iyi çalışıyor, ancak tüm tarayıcılarda, hatta IE'de tüm olası stilleri alıyor .

Uyarı: Bu kod çok fazla çıktı üretir ve az kullanılmalıdır. Yalnızca tüm standart CSS özelliklerini değil, aynı zamanda o tarayıcı için tüm satıcı CSS özelliklerini de kopyalar.

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

Temel kullanım oldukça basit, ama bunun için de bir fonksiyon yazdı:

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

Umarım yardımcı olur.

Neden .styleDOM öğesini kullanmıyorsunuz ? Bu gibi üyelerini içeren bir nesne var widthve backgroundColor.

Birçok farklı çözüm denemiştim. Bu, benim için işe yarayan tek şeydi, sınıf seviyesinde ve doğrudan öğeye atfedilen tarzda uygulanan stilleri alabildi. Yani css dosya düzeyinde ve bir stil niteliği olarak ayarlanmış bir yazı tipi; doğru yazı tipini döndürdü.

Basit! (Üzgünüm, ilk bulduğum yeri bulamıyorum)

//-- 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"]

Alternatif olarak, dizi boyunca bisiklet sürerek tüm stili listeleyebilirsiniz

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

@ marknadal'ın çözümü benim için tirelemeli özellikler yakalamıyordu (örneğin max-width), ancak ilk fordöngüyü değiştirmek css2json()işe yaradı ve daha az yineleme gerçekleştirdiğinden şüpheleniyorum:

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

Aracılığıyla Döngüler lengthziyade in,aracılığıyla Geri alma getPropertyValue()yerinetoLowerCase().