Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Export CSS of DOM elements

Tags:

css

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?

like image 468
Randomblue Avatar asked Oct 13 '11 12:10

Randomblue


People also ask

How do I get the DOM element style?

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.

Can CSS modify DOM?

No. CSS does not change the DOM.


1 Answers

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

like image 68
Luc125 Avatar answered Oct 08 '22 08:10

Luc125