¿Hay alguna manera en jQuery para obtener todos los CSS de un elemento existente y aplicarlos 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.

300
alex 16 abr. 2009 a las 07:08

5 respuestas

La mejor respuesta

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 en css() y devolverá un objeto, que luego puede volver a enchufar en $().css() de jQuery, por ejemplo:

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

:)

338
George Garchagudashvili 5 nov. 2014 a las 07:02

¿Por qué no usar .style del elemento DOM? Es un objeto que contiene miembros como width y backgroundColor.

16
strager 4 feb. 2010 a las 09:49

Dos años de retraso, pero tengo la solución que estás buscando. Sin la intención de obtener crédito del autor original, aquí hay un complemento que encontré funciona excepcionalmente bien para lo que necesita, pero obtiene < strong> all estilos posibles en todos los navegadores, incluso IE.

Advertencia: este código genera muchos 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);
}

Espero que eso ayude.

90
Servy 2 dic. 2015 a las 15:58

La solución de @ marknadal no fue obtener propiedades con guiones para mí (por ejemplo, max-width), sino cambiar el primer bucle for en css2json() lo hizo funcionar, y sospecho que realiza menos iteraciones:

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

Los bucles a través de length en lugar de in, se recuperan a través de getPropertyValue() en lugar de toLowerCase().

4
Brandon Hill 16 dic. 2013 a las 21:07

Había probado muchas soluciones diferentes. Este fue el único que funcionó para mí, ya que fue capaz de retomar los estilos aplicados a nivel de clase y en el estilo directamente atribuido en el elemento. Entonces, una fuente establecida a nivel de archivo css y una como atributo de estilo; devolvió la fuente correcta.

¡Es simple! (Lo siento, no puedo encontrar dónde lo encontré originalmente)

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

Alternativamente, puede enumerar todo el estilo recorriendo la matriz

for (var key in stylearray) {
console.log(key + ': ' + stylearray[key];
}
10
Valamas 15 abr. 2015 a las 20:47