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?
The DOM style property to retrieve inline styles applied to an element using the style attribute. The window. getComputedStyle() method to retrieve computed styles applied to an element through <style> elements and external style sheets.
No. CSS does not change the DOM.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With