Getting all css used in html file

Question

I have to get what are all the CSS styles used in a HTML file using JavaScript.

<html>
    <head>
        <style type="text/css">
            body {
                border: 1px solid silver;
            }
            .mydiv{
                color: blue;
            }
        </style>
    </head>
    <body>
    </body>
</html>

If the above code is my HTML I have to write one JavaScript function inside the head which returns a string like this.

body {
    border: 1px solid silver;
}
.mydiv {
    color: blue;
}

Is it possible to do?

bobince · Accepted Answer · 2009-11-05T13:06:26.823

For inline stylesheets, you can get the content out of the normal DOM like with any other element:

document.getElementsByTagName('style')[0].firstChild.data

For external, linked stylesheets it's more problematic. In modern browsers, you can get the text of every rule (including inline, linked and @imported stylesheets) from the document.styleSheets[].cssRules[].cssText property.

Unfortunately IE does not implement this DOM Level 2 Style/CSS standard, instead using its own subtly different version of the StyleSheet and CSSRule interfaces. So you need some sniff-and-branch code to recreate rules in IE, and the text might not be exactly the same as the original. (In particular, IE will ALL-CAPS your property names and lose whitespace.)

var css= [];

for (var sheeti= 0; sheeti<document.styleSheets.length; sheeti++) {
    var sheet= document.styleSheets[sheeti];
    var rules= ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
    for (var rulei= 0; rulei<rules.length; rulei++) {
        var rule= rules[rulei];
        if ('cssText' in rule)
            css.push(rule.cssText);
        else
            css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
    }
}

return css.join('\n');

I get the following error: `TypeError: Cannot read property 'length' of null` — starbeamrainbowlabs, Oct 07 '13 at 14:54
If the stylesheet has no rules, you get a `TypeError: Cannot read property 'length' of null` error. To avoid that, simply add a condition before `for (var rulei= 0; rulei — rAthus, Jul 16 '15 at 17:00

score 13 · Answer 2 · answered May 24 '20 at 13:14

From Mdn:

const allCSS = [...document.styleSheets]
  .map(styleSheet => {
    try {
      return [...styleSheet.cssRules]
        .map(rule => rule.cssText)
        .join('');
    } catch (e) {
      console.log('Access to stylesheet %s is denied. Ignoring...', styleSheet.href);
    }
  })
  .filter(Boolean)
  .join('\n');

rAthus · Answer 3 · 2015-07-16T17:22:06.217

Here's my solution :

var css = [];
for (var i=0; i<document.styleSheets.length; i++)
{
    var sheet = document.styleSheets[i];
    var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
    if (rules)
    {
        css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
        for (var j=0; j<rules.length; j++)
        {
            var rule = rules[j];
            if ('cssText' in rule)
                css.push(rule.cssText);
            else
                css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
        }
    }
}
var cssInline = css.join('\n')+'\n';

In the end, cssInline is a textual list of all the steelsheets of the page and their content.

Example :

/* Stylesheet : http://example.com/cache/css/javascript.css */
.javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
.javascript { color: rgb(172, 172, 172); }
.javascript .imp { font-weight: bold; color: red; }

/* Stylesheet : http://example.com/i/main_master.css */
html { }
body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
a { color: rgb(204, 0, 51); text-decoration: none; }
a:hover { color: rgb(153, 153, 153); text-decoration: none; }
.icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
#header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
#super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
#monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
#header a { color: rgb(255, 255, 255); }
#menu_2 { height: 290px; }

/* Stylesheet : [inline styles] */
.hidden { display: none; }

score 2 · Answer 4 · edited Oct 22 '18 at 13:51

Here is my solution:

function getallcss() {
    var css = "", //variable to hold all the css that we extract
        styletags = document.getElementsByTagName("style");

    //loop over all the style tags
    for(var i = 0; i < styletags.length; i++)
    {
        css += styletags[i].innerHTML; //extract the css in the current style tag
    }

    //loop over all the external stylesheets
    for(var i = 0; i < document.styleSheets.length; i++)
    {
        var currentsheet = document.styleSheets[i];
        //loop over all the styling rules in this external stylesheet
        for(var e = 0; e , currentsheet.cssRules.length; e++)
        {
            css += currentsheet.cssRules[e].cssText; //extract all the styling rules
        }
    }

    return css;
}

It is based on @bobince's answer.

It extracts all the css from both the style tags and the external stylesheets.

Getting all css used in html file

4 Answers4

Linked