CSS Parsen mit JavaScript

[Thomas Darimont]

Hallo,

hier mal ein kleines Beispiel wie man mit einfachen Browsermitteln CSS selbst Parsen kann:

function parseCss(content){
    var se = document.createElement("style");
    se.textContent = content;
    document.implementation.createHTMLDocument("").body.appendChild(se);
    return se.sheet.cssRules;
}

var css = "body { color: red; }"
+ "h1 { color: #00ff00; }"
+ "p.ex { color: rgb(0,0,255);}"

var parsedCssRules = parseCss(css);

for(var i = 0; i < parsedCssRules.length; i++){
   
    var cssRule = parsedCssRules[i];
    console.log("cssText: '" + cssRule.cssText + "', selectorText: '" + cssRule.selectorText +"' -> color: '" + cssRule.style.color +"'");
}

Ausgabe:

cssText: 'body { color: red; }', selectorText: 'body' -> color: 'red' VM379:18
cssText: 'h1 { color: rgb(0, 255, 0); }', selectorText: 'h1' -> color: 'rgb(0, 255, 0)' VM379:18
cssText: 'p.ex { color: rgb(0, 0, 255); }', selectorText: 'p.ex' -> color: 'rgb(0, 0, 255)' VM379:18

Viele Grüße,
Tom