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

Posted 2023-02-22

【中文标题】jQuery 可以获取与元素关联的所有 CSS 样式吗？

【英文标题】：Can jQuery get all CSS styles associated with an element?

【发布时间】：2010-10-19 18:28:24

【问题描述】：

在 jQuery 中有没有办法从现有元素中获取所有 CSS 并将其应用到另一个元素而不列出所有元素？

我知道如果它们是带有attr() 的样式属性，它会起作用，但我所有的样式都在外部样式表中。

【参考方案1】：

晚了几年，但这里有一个同时检索内联样式和外部样式的解决方案：

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

:)

【讨论】：

顺便说一句，当您说 JSON 对象 时，您的意思是指 javascript 对象吧？

这看起来很棒，但是当我尝试它时，它错过了某些属性，例如 font-family。

@Damon：这是一个有效的假设，考虑到答案的第一行说 ...这是一个同时检索 内联样式 和外部样式的解决方案.

这段代码不再起作用（在 Chrome 中总是返回空对象）

注意：版主修改了我的原始代码，我不保证任何事情都会奏效。

【参考方案2】：

晚了两年，但我有您正在寻找的解决方案。不打算从original author 获得荣誉，这是一个我发现非常适合您需要的插件，但在所有浏览器（甚至 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);

希望对您有所帮助。

【讨论】：

@Damon：谢谢！我更新了我的帖子，并稍微编辑了措辞，以明确这不是我的工作。对前面的措辞感到抱歉，我想我是在深夜输入了这个答案，但无论哪种方式，它都很糟糕。

为什么返回this.css()？这个方法没有 documentation 没有参数，如果到达这个语句，它会抛出一个异常。我认为return returns; 更合适，即使它是一个空对象。

是否有可能获得这个的工作演示？我不清楚将这段代码放在哪里以及如何调用它。我也不清楚输出存储在哪里。谢谢。

我不明白如何使用它，有一种叫做 jsfiddle 的东西，大多数人都使用它来提供帮助。好的程序员是最差的老师

@Gino 如果您想将 div1 的样式复制到 div 2，只需使用：$("#div2").copyCSS($("#div1")); 并获取您可以使用的任何元素的样式： JSON.stringify($('#element').getStyleObject());

【参考方案3】：

为什么不使用.style of the DOM element？它是一个包含width 和backgroundColor 等成员的对象。

【讨论】：

我很确定这是获得与类相关联的实际样式的唯一方法。 （相对于不同的计算样式）

使用 .style 您只能获得应用于元素样式属性的属性，而不是那些应用于 CSS 类的属性。

+1 因为我使用内联脚本并在后面动态更改它

【参考方案4】：

我尝试了许多不同的解决方案。这是唯一对我有用的，因为它能够获取在类级别应用的样式和直接归因于元素的样式。所以在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];

【讨论】：

In many code samples, getComputedStyle is used from the document.defaultView object. In nearly all cases, this is needless, as getComputedStyle exists on the window object as well. It's likely the defaultView pattern was a combination of folks not wanting to write a testing spec for window and making an API that was also usable in Java.

【参考方案5】：

@marknadal 的解决方案并没有为我获取带连字符的属性（例如 max-width），而是更改了 css2json() 中的第一个 for 循环使其工作，我怀疑执行的迭代次数更少：

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

通过length 而不是in, 循环，通过getPropertyValue() 而不是toLowerCase(). 检索