JavaScript: leggere le regole di un foglio di stile CSS

Possiamo utilizzare JavaScript per leggere le regole di un foglio di stile CSS.

Data il seguente foglio di stile:

#test {
    color: green;
}

Possiamo scrivere il seguente codice JavaScript:

'use strict';

let rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for( let i = 0; i < rules.length; ++i ) {
	let selector = rules[i].selectorText; // #test
	let css = rules[i].cssText; // #test { color: green; }
}

L'array di riferimento da cui partire contiene oggetti di tipo regola ordinati secondo l'ordine di inserimento dei fogli di stile nel sorgente della pagina. Ad un'analisi attenta risulta chiaro che individuando il selettore e la regola si possono eseguire sovrascritture degli stili:

'use strict';

let rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;

for( let i = 0; i < rules.length; ++i ) {
	let selector = rules[i].selectorText;
	let css = rules[i].cssText;
    if(css.includes('green')) {
        document.querySelector(selector).style.color = 'red';
    }
}