Exportation CSS d'éléments DOM

Question

Je trouve souvent de beaux styles sur le Web. Pour copier le CSS d'un élément DOM, j'inspecte cet élément avec les outils de développement de Google Chrome, examine les différentes propriétés CSS et les copie manuellement dans mes propres feuilles de style.

Est-il possible d'exporter facilement toutes les propriétés CSS d'un élément DOM donné?

Answer 1

Voici le code pour un exportStyles() méthode doit retourner un CSS chaîne, y compris en ligne et les styles externes, pour un élément donné, à l'exception des valeurs par défaut (qui a été la principale difficulté).

Par exemple: console.log(someElement.exportStyles());

Puisque vous utilisez google Chrome, je n'ai pas la peine de rendre compatible avec IE. En fait il faut juste que le navigateur prend en charge l' getComputedStyle(element) méthode.

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

})();

Ce code est la base sur ma réponse un peu liés à la question: Extraire le DOM et l'imprimer comme une chaîne de caractères, avec des styles intacte

Answer 2

Je cite Doozer Blake's excellente réponse, à la condition ci-dessus comme un commentaire. Si vous aimez cette réponse, veuillez upvote son origine du commentaire ci-dessus:

Pas une réponse directe, mais avec Chrome Developer Tools, vous pouvez cliquer à l'intérieur de Styles de ou Calculée Styles, appuyez sur Ctrl+A puis Ctrl+C pour copier tous les styles dans ces domaines. Il n'est pas parfait dans l'onglet Style, car il ramasse quelques trucs supplémentaires. Mieux que les sélectionnant un par un, je suppose. – Doozer Blake il y a 3 heures

Vous pouvez faire la même chose à l'aide de Firebug pour Firefox, en utilisant Firebug est "Calculé" panneau latéral.

Answer 3

Il ya quelques façons de près de le faire.

Jetez un oeil à FireDiff

Aussi jeter un oeil à cssUpdater C'est pour les locaux CSS]

Et de voir ce Q pour plus d'outils similaires: Pourquoi je ne peux pas enregistrer CSS changements dans FireBug?

Aussi payé le produit prétend être capable de faire cela: http://www.skybound.ca/

Answer 4

Si vous recherchez une barre d’outils ou un logiciel, utilisez le copieur de site Web HTTTrack. Il copiera toutes les données du site, y compris picture, css. Voici un site Web http://www.httrack.com/ . Il suffit de télécharger une copie et commencer à utiliser immédiatement.