JQuery có thể có được tất cả các kiểu CSS được liên kết với một phần tử không?

Có cách nào trong jQuery để lấy tất cả CSS từ một phần tử hiện có và áp dụng nó cho phần tử khác mà không liệt kê tất cả chúng không?

Tôi biết nó sẽ hoạt động nếu chúng là một thuộc tính kiểu attr(), nhưng tất cả các kiểu của tôi đều nằm trong một biểu định kiểu bên ngoài.

Một vài năm muộn màng, nhưng đây là một giải pháp lấy cả kiểu dáng nội tuyến và kiểu dáng bên ngoài:

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

Truyền một đối tượng jQuery vào css()và nó sẽ trả về một đối tượng, sau đó bạn có thể cắm lại vào jQuery $().css(), ví dụ:

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

:)

Hai năm muộn, nhưng tôi có giải pháp bạn đang tìm kiếm. Không có ý định lấy tín dụng từ tác giả ban đầu , đây là một plugin mà tôi thấy hoạt động cực kỳ tốt cho những gì bạn cần, nhưng có tất cả các kiểu có thể có trong tất cả các trình duyệt, thậm chí cả IE.

Cảnh báo: Mã này tạo ra rất nhiều đầu ra và nên được sử dụng một cách tiết kiệm. Nó không chỉ sao chép tất cả các thuộc tính CSS tiêu chuẩn, mà còn tất cả các thuộc tính CSS của nhà cung cấp cho trình duyệt đó.

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

Cách sử dụng cơ bản khá đơn giản, nhưng anh ấy cũng đã viết một chức năng cho điều đó:

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

Mong rằng sẽ giúp.

Tại sao không sử dụng .stylephần tử DOM ? Đó là một đối tượng có chứa các thành viên như widthvà backgroundColor.

Tôi đã thử nhiều giải pháp khác nhau. Đây là người duy nhất làm việc cho tôi ở chỗ nó có thể chọn các kiểu được áp dụng ở cấp lớp và ở kiểu như được gán trực tiếp vào phần tử. Vì vậy, một phông chữ được đặt ở cấp tệp css và một phông làm thuộc tính kiểu; Nó trả lại đúng phông chữ.

Nó đơn giản! (Xin lỗi, không thể tìm thấy nơi tôi tìm thấy ban đầu)

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

Ngoài ra, bạn có thể liệt kê tất cả các phong cách bằng cách đạp xe qua mảng

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

Giải pháp của @ marknadal không lấy các thuộc tính gạch nối cho tôi (ví dụ max-width), nhưng thay đổi forvòng lặp đầu tiên để css2json()nó hoạt động và tôi nghi ngờ thực hiện ít lần lặp hơn:

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

Vòng lặp thông qua lengththay vì in,truy xuất thông qua getPropertyValue()chứ không phảitoLowerCase().