Javascript jQuery可以获取与元素关联的所有CSS样式吗？

在jQuery中有没有一种方法可以从一个现有元素中获取所有CSS并将其应用到另一个元素，而不列出它们

---

我知道如果它们是一个带有

attr（）

的样式属性，它会起作用，但我所有的样式都在一个外部样式表中。

为什么不使用？它是一个包含成员的对象，例如晚了几年的

width

和

backgroundColor

，但这里有一个解决方案可以检索内联样式和外部样式：

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

---

希望这能有所帮助。

@marknadal的解决方案不是为我获取连字号属性（例如

max width

），而是在

css2json（）

中更改

的第一个
循环使其工作，我怀疑执行的迭代次数更少：

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

for（变量i=0；i

通过
length
而不是
in进行循环，
通过
getPropertyValue（）
而不是
toLowerCase（）进行检索。
我尝试了许多不同的解决方案。这是唯一一个对我有效的方法，因为它能够拾取在类级别应用的样式和直接归属于元素的样式。因此，在css文件级别设置字体，并将其作为样式属性；它返回了正确的字体

这很简单！（对不起，找不到我最初在哪里找到的）

或者，您可以通过在阵列中循环列出所有样式

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

我很确定这是获得与类相关的实际样式的唯一方法。（与不同的计算样式相反）使用.style，您只会获得应用于元素的style属性的属性，而不会获得应用于CSS类的属性。+1因为我使用内联脚本并在wordsbtw后动态更改它，当您说JSON对象时，您只是指JavaScript对象，对吗？这看起来很棒，但是当我尝试它时，它忽略了某些属性，例如字体系列。@Damon：考虑到答案的第一行所说的，这是一个有效的假设……这里有一个解决方案，可以检索内联样式和外部样式。这段代码不再起作用了（在Chrome中总是返回空对象）注意：版主已经修改了我的原始代码，我不保证任何东西都能正常工作。@Damon:谢谢！我已经更新了我的帖子，并对措辞稍加修改，以明确这不是我的作品。很抱歉前面的措辞，我想我是在深夜键入了这个答案，但不管怎样，它都很难看。为什么返回
this.css（）
？这个方法不带任何参数，如果到达这个语句，它将抛出一个异常。我认为
返回更合适即使它是一个空对象。有可能得到一个工作演示吗？我不清楚该将此代码放在何处以及如何调用它。我也不清楚输出存储在哪里。谢谢。我不知道如何使用它，有一种叫做JSFIDLE的东西，大多数人都用它来帮助。好的程序员更糟teacher@Gino如果要将div1的样式复制到div2，只需使用：
$（“#div2”）.copyCSS（$（“#div1”）JSON.stringify（$（'#element'）.getStyleObject（））
//-- 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];
}