【发布时间】：2010-10-19 18:28:24
【问题描述】：
在 jQuery 中有没有办法从现有元素中获取所有 CSS 并将其应用到另一个元素而不列出所有元素？
我知道如果它们是带有attr() 的样式属性，它会起作用，但我所有的样式都在外部样式表中。
【问题讨论】：
标签： javascript jquery css
【发布时间】：2010-10-19 18:28:24
【问题描述】：
晚了几年，但这里有一个同时检索内联样式和外部样式的解决方案：
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 中总是返回空对象）
-
注意：版主修改了我的原始代码，我不保证任何事情都会奏效。
晚了两年，但我有您正在寻找的解决方案。不打算从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());
为什么不使用.style of the DOM element？它是一个包含width 和backgroundColor 等成员的对象。
【讨论】：
-
我很确定这是获得与类相关联的实际样式的唯一方法。 （相对于不同的计算样式）
-
使用 .style 您只能获得应用于元素样式属性的属性，而不是那些应用于 CSS 类的属性。
-
+1 因为我使用内联脚本并在后面动态更改它
我尝试了许多不同的解决方案。这是唯一对我有用的，因为它能够获取在类级别应用的样式和直接归因于元素的样式。所以在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），而是更改了 css2json() 中的第一个 for 循环使其工作，我怀疑执行的迭代次数更少：
for (var i = 0; i < css.length; i += 1) {
s[css[i]] = css.getPropertyValue(css[i]);
}
通过length 而不是in, 循环，通过getPropertyValue() 而不是toLowerCase(). 检索
【讨论】：