link - Exportar CSS de elementos DOM

title html attribute

Question

A menudo encuentro bonitos estilos en la web. Para copiar el CSS de un elemento DOM, lo inspecciono con las herramientas de desarrollo de Google Chrome, observo las distintas propiedades de CSS y las copio manualmente en mis propias hojas de estilo.

¿Es posible exportar fácilmente todas las propiedades CSS de un elemento DOM dado?

Answer 1

Estoy citando la excelente respuesta de Doozer Blake , proporcionada anteriormente como un comentario. Si le gusta esta respuesta, por favor haga su comentario original arriba:

No es una respuesta directa, pero con Chrome Developer Tools, puede hacer clic en Estilos o Estilos calculados, presionar Ctrl + A y luego Ctrl + C para copiar todos los estilos en esas áreas. No es perfecto en la pestaña Estilo porque recoge algunas cosas extra. Mejor que seleccionarlos uno por uno, supongo. - Doozer Blake hace 3 horas

Puede hacer lo mismo usando Firebug para Firefox , usando el panel lateral "Computed" de Firebug .

Answer 2

Hay algunas maneras de casi hacer esto.

Echa un vistazo a FireDiff

También eche un vistazo a cssUpdater Esto es solo para CSS local]

Y vea esta Q para herramientas más similares: ¿Por qué no puedo guardar los cambios de CSS en Firebug?

También este producto pagado reclama poder hacer esto: http://www.skybound.ca/

Answer 3

Aquí está el código para un método exportStyles() que debe devolver una cadena CSS que incluye todos los estilos en línea y externos para un elemento dado, excepto los valores predeterminados (que era la principal dificultad).

Por ejemplo: console.log(someElement.exportStyles());

Ya que estás usando Chrome, no me molesté en hacerlo compatible con IE. En realidad, solo se necesita que los navegadores getComputedStyle(element) el getComputedStyle(element) .

Element.prototype.exportStyles = (function () {  

    // Mapping between tag names and css default values lookup tables. This allows to exclude default values in the result.
    var defaultStylesByTagName = {};

    // Styles inherited from style sheets will not be rendered for elements with these tag names
    var noStyleTags = {"BASE":true,"HEAD":true,"HTML":true,"META":true,"NOFRAME":true,"NOSCRIPT":true,"PARAM":true,"SCRIPT":true,"STYLE":true,"TITLE":true};

    // This list determines which css default values lookup tables are precomputed at load time
    // Lookup tables for other tag names will be automatically built at runtime if needed
    var tagNames = ["A","ABBR","ADDRESS","AREA","ARTICLE","ASIDE","AUDIO","B","BASE","BDI","BDO","BLOCKQUOTE","BODY","BR","BUTTON","CANVAS","CAPTION","CENTER","CITE","CODE","COL","COLGROUP","COMMAND","DATALIST","DD","DEL","DETAILS","DFN","DIV","DL","DT","EM","EMBED","FIELDSET","FIGCAPTION","FIGURE","FONT","FOOTER","FORM","H1","H2","H3","H4","H5","H6","HEAD","HEADER","HGROUP","HR","HTML","I","IFRAME","IMG","INPUT","INS","KBD","KEYGEN","LABEL","LEGEND","LI","LINK","MAP","MARK","MATH","MENU","META","METER","NAV","NOBR","NOSCRIPT","OBJECT","OL","OPTION","OPTGROUP","OUTPUT","P","PARAM","PRE","PROGRESS","Q","RP","RT","RUBY","S","SAMP","SCRIPT","SECTION","SELECT","SMALL","SOURCE","SPAN","STRONG","STYLE","SUB","SUMMARY","SUP","SVG","TABLE","TBODY","TD","TEXTAREA","TFOOT","TH","THEAD","TIME","TITLE","TR","TRACK","U","UL","VAR","VIDEO","WBR"];

    // Precompute the lookup tables.
    for (var i = 0; i < tagNames.length; i++) {
        if(!noStyleTags[tagNames[i]]) {
            defaultStylesByTagName[tagNames[i]] = computeDefaultStyleByTagName(tagNames[i]);
        }
    }

    function computeDefaultStyleByTagName(tagName) {
        var defaultStyle = {};
        var element = document.body.appendChild(document.createElement(tagName));
        var computedStyle = getComputedStyle(element);
        for (var i = 0; i < computedStyle.length; i++) {
            defaultStyle[computedStyle[i]] = computedStyle[computedStyle[i]];
        }
        document.body.removeChild(element); 
        return defaultStyle;
    }

    function getDefaultStyleByTagName(tagName) {
        tagName = tagName.toUpperCase();
        if (!defaultStylesByTagName[tagName]) {
            defaultStylesByTagName[tagName] = computeDefaultStyleByTagName(tagName);
        }
        return defaultStylesByTagName[tagName];
    }

    return function exportStyles() {
        if (this.nodeType !== Node.ELEMENT_NODE) {
            throw new TypeError("The exportStyles method only works on elements, not on " + this.nodeType + " nodes.");
        }
        if (noStyleTags[this.tagName]) {
            throw new TypeError("The exportStyles method does not work on " + this.tagName + " elements.");
        }
        var styles = {};
        var computedStyle = getComputedStyle(this);
        var defaultStyle = getDefaultStyleByTagName(this.tagName);
        for (var i = 0; i < computedStyle.length; i++) {
            var cssPropName = computedStyle[i];
            if (computedStyle[cssPropName] !== defaultStyle[cssPropName]) {
                styles[cssPropName] = computedStyle[cssPropName];
            }
        }

        var a = ["{"];
        for(var i in styles) {
            a[a.length] = i + ": " + styles[i] + ";";
        }
        a[a.length] = "}"
        return a.join("/r/n");
    }

})();

Este código se basa en mi respuesta para una pregunta ligeramente relacionada: Extraiga el DOM actual e imprímalo como una cadena, con los estilos intactos