Может ли jQuery получить все стили CSS, связанные с элементом?

Есть ли способ в jQuery получить весь CSS из существующего элемента и применить его к другому, не перечисляя их все?

Я знаю, что это сработало бы, если бы они были атрибутом стиля attr(), но все мои стили находятся во внешней таблице стилей.

Через пару лет, но вот решение, которое извлекает как встроенный стиль, так и внешний стиль:

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

Передайте объект jQuery, css()и он вернет объект, который затем можно подключить обратно в jQuery $().css(), например:

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

:)

Два года спустя, но у меня есть решение, которое вы ищете. Не собираясь брать кредит от первоначального автора , вот плагин, который, как я обнаружил, работает исключительно хорошо для того, что вам нужно, но получает все возможные стили во всех браузерах, даже в IE.

Предупреждение: этот код генерирует много выходных данных, и его следует использовать с осторожностью. Он не только копирует все стандартные свойства CSS, но также и все свойства CSS поставщика для этого браузера.

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

Основное использование довольно просто, но он также написал функцию для этого:

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

Надеюсь, это поможет.

Почему бы не использовать .styleэлемент DOM ? Это объект, который содержит элементы, такие как widthи backgroundColor.

Я перепробовал много разных решений. Это был единственный способ, который мне помог, так как он был в состоянии уловить стили, применяемые на уровне класса и в стиле, непосредственно приписываемом элементу. Таким образом, шрифт установлен на уровне файла CSS и один в качестве атрибута стиля; вернул правильный шрифт.

Это просто! (Извините, не могу найти, где я его изначально нашел)

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

Кроме того, вы можете перечислить все стили, циклически перемещаясь по массиву

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

Решение @ marknadal не собирало для меня свойства дефиса (например max-width), но изменило первый forцикл, чтобы css2json()оно заработало, и я подозреваю, что выполняется меньше итераций:

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

Циклы через, lengthа не in,извлекают через, getPropertyValue()а неtoLowerCase().