导出DOM元素的CSS
我经常在网上find漂亮的风格。 要复制DOM元素的CSS，我使用Google Chrome开发人员工具检查该元素，查看各种CSS属性，然后将这些属性手动复制到我自己的样式表中。
是否可以轻松导出给定DOM元素的所有CSS属性？
这里是一个exportStyles()方法的代码，它应该返回一个CSSstring，包括给定元素的所有内联和外部样式， 除了默认值（这是主要难点）。
例如： console.log(someElement.exportStyles());
既然你使用的是Chrome浏览器，我并不打算使它与IE兼容。 实际上它只是需要浏览器支持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"); } })();
这个代码是基于我的回答一个稍微相关的问题： 提取当前的DOM，并将其打印为一个string，样式不变
我引用了Doozer Blake的优秀答案，作为评论。 如果你喜欢这个答案，请点击上面的原始评论：
不是直接的答案，但使用Chrome开发人员工具，您可以单击样式或计算样式，按Ctrl + A，然后按Ctrl + C复制这些给定区域中的所有样式。 这在Style（风格）选项卡中并不完美，因为它挑选了一些额外的东西。 比我猜想的一个一个select更好。 – 3小时前的Doozer Blake
您可以使用Firebug for Firefox ，使用Firebug的“Computed”侧面板进行同样的操作 。
有几种方法几乎可以做到这一点。
看看FireDiff
也看看cssUpdater这只是本地CSS]
并看到更多类似的工具Q： 为什么我不能保存在Firebug中的CSS更改？
此付费产品声称能够做到这一点： http : //www.skybound.ca/
