¿Puede jQuery obtener todos los estilos CSS asociados con un elemento?
¿Hay alguna forma en jQuery de obtener todo el CSS de un elemento existente y aplicarlo a otro sin enumerarlos todos?
Sé que funcionaría si fueran un atributo de estilo con attr(), pero todos mis estilos están en una hoja de estilos externa.
Un par de años tarde, pero aquí hay una solución que recupera tanto el estilo en línea como el estilo externo:
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;
}
Pase un objeto jQuery css()y devolverá un objeto, que luego podrá volver a conectar a jQuery $().css(), por ejemplo:
var style = css($("#elementToGetAllCSS"));
$("#elementToPutStyleInto").css(style);
:)
Dos años de retraso, pero tengo la solución que buscas. Sin intención de atribuirme el mérito del autor original , aquí hay un complemento que encontré que funciona excepcionalmente bien para lo que necesitas, pero obtiene todos los estilos posibles en todos los navegadores, incluso IE.
Advertencia: este código genera una gran cantidad de resultados y debe usarse con moderación. No solo copia todas las propiedades CSS estándar, sino también todas las propiedades CSS del proveedor para ese navegador.
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);
El uso básico es bastante simple, pero también ha escrito una función para eso:
$.fn.copyCSS = function(source){
var styles = $(source).getStyleObject();
this.css(styles);
}
¿Por qué no utilizar .styleel elemento DOM ? Es un objeto que contiene miembros como widthy backgroundColor.
