导出DOM元素的CSS [英] Export CSS of DOM elements

问题描述

我经常在网上找到漂亮的造型。要复制DOM元素的CSS，请使用Google Chrome开发者工具检查该元素，查看各种CSS属性，并将其手动复制到我自己的样式表。

是否可以轻松导出给定DOM元素的所有CSS属性？

解决方案

c> exportStyles（）方法应该返回一个CSS字符串，包括给定元素的所有内联和外部样式，除了默认值， p>

例如： console.log（someElement.exportStyles（））;

由于您使用Chrome，我没有打扰它与IE兼容。
实际上，只需要浏览器支持 getComputedStyle（element）方法。

  Element.prototype.exportStyles =（function（）{
 
 //在标记名称和cb默认值查找表允许在结果中排​​除默认值
 var defaultStylesByTagName = {}; 
 
 //从样式表继承的样式不会呈现给具有这些标签的元素names 
 var noStyleTags = {BASE：true，HEAD：true，HTML：true，META：true，NOFRAME：true，NOSCRIPT：true，PARAM：true ，SCRIPT：true，STYLE：true，TITLE：true}; 
 
 //此列表确定在加载时预先计算哪些css默认值查找表
 //如果需要，其他标记名称的查找表将在运行时自动构建
 var tagNames = [A，ABBR，ADDRESS，AREA，ARTICLE，ASIDE，AUDIO 「B」，「BASE」，「BDI」，「BDO」，「BLOCKQUOTE」，「BODY」，「BR」，「BUTTON」，「CANVAS」，「CAPTION」，「CENTER」，「CI​​TE」， COL，COL，COMMAND，DATALIST，DD，DEL，DETAILS，DFN，DIV，DL，DT，EM EMBED，FIELDSET，FIGCAPTION，FIG，FONT，FOOTER，FORM，H1，H2，H3，H4，H5，H6 ，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 T，T，TH，THEAD，TIME，TITLE，TR，TITLE，SUP，SVG， TRACK，U，UL，VAR，VIDEO，WBR]; 
 
 //预计算查找表。 
 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< calculateStyle.length; i ++）{
 defaultStyle [computedStyle [i]] = calculatedStyle [computedStyle [i]]; 
} 
 document.body.removeChild（element）; 
 return defaultStyle; 
} 
 
 function getDefaultStyleByTagName（tagName）{
 tagName = tagName.toUpperCase（）; 
 if（！defaultStylesByTagName [tagName]）{
 defaultStylesByTagName [tagName] = computeDefaultStyleByTagName（tagName）; 
} 
 return defaultStylesByTagName [tagName]; 
} 
 
返回函数exportStyles（）{
 if（this.nodeType！== Node.ELEMENT_NODE）{
 throw new TypeError（exportStyles method only work on元素，而不是+ this.nodeType +nodes。 
} 
 if（noStyleTags [this.tagName]）{
 throw new TypeError（exportStyles方法不适用于+ this.tagName +元素。 
} 
 var styles = {}; 
 var computedStyle = getComputedStyle（this）; 
 var defaultStyle = getDefaultStyleByTagName（this.tagName）; 
 for（var i = 0; i< calculatedStyle.length; i ++）{
 var cssPropName = calculatedStyle [i]; 
 if（computedStyle [cssPropName]！== defaultStyle [cssPropName]）{
 styles [cssPropName] = calculatedStyle [cssPropName]; 
} 
} 
 
 var a = [{]; 
 for（var i in styles）{
 a [a.length] = i +：+ styles [i] +; 
} 
 a [a.length] =}
 return a.join（\r\\\
）; 
} 
 
}）（）; 
  

这段代码基于我的回答一个稍微相关的问题：提取当前DOM并将其作为字符串打印，样式完好

I often find nice stylings on the web. To copy the CSS of a DOM element, I inspect that element with Google Chrome Developer Tools, look at the various CSS properties, and copy those manually to my own stylesheets.

Is it possible to easily export all CSS properties of a given DOM element?

解决方案

Here is the code for an exportStyles() method that should return a CSS string including all inline and external styles for a given element, except default values (which was the main difficulty).

For example: console.log(someElement.exportStyles());

Since you are using Chrome, I did not bother making it compatible with IE. Actually it just needs that the browsers supports the getComputedStyle(element) method.

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

})();

This code is base on my answer for a slightly related question: Extract the current DOM and print it as a string, with styles intact

这篇关于导出DOM元素的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！