Exportar CSS de elementos DOM

A menudo encuentro estilos agradables en la web. Para copiar el CSS de un elemento DOM, inspecciono ese elemento con Google Chrome Developer Tools, miro las diversas 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?

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

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

Como usas Chrome, no me molesté en hacerlo compatible con IE. En realidad solo necesita que los navegadores sean compatibles con 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 estilos intactos

Estoy citando la excelente respuesta de Doozer Blake , proporcionada anteriormente como comentario. Si te gusta esta respuesta, vota su comentario original anterior:

No es una respuesta directa, pero con Chrome Developer Tools, puede hacer clic dentro de 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 adicionales. Mejor que seleccionarlos uno por uno, supongo. – Doozer Blake hace 3 horas

Puedes hacer lo mismo usando Firebug para Firefox , usando el panel lateral “Computado” de Firebug .

Hay algunas maneras de casi hacer esto.

Eche un vistazo a FireDiff

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

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

También este producto pago afirma ser capaz de hacer esto: http://www.skybound.ca/