Una regola CSS letta attraverso il DOM è costituita da due parti: un selettore ed una dichiarazione. Possiamo utilizzare il DOM e jQuery per selezionare gli elementi in base agli stili specificati nel codice CSS.
Ecco una semplice regola CSS:
#test {
color: green;
}
Ed ecco come leggere tale regola nel DOM:
var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for( var i = 0; i < rules.length; ++i ) {
var selector = rules[i].selectorText; // #test
var css = rules[i].cssText; // #test { color: green; }
}
Il selettore è contenuto nella proprietà selectorText
di ciascuna regola (un oggetto) e la dichiarazione viene memorizzata
nella proprietà cssText
.
Supponiamo di voler creare un selettore jQuery che selezioni gli elementi solo se su di essi è stata specificata una transizione CSS. Ecco come fare:
$.expr[ ":" ].hasTransition = function( element ) {
var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
var found = false;
for( var i = 0; i < rules.length; ++i ) {
var selector = rules[i].selectorText;
var css = rules[i].cssText;
if( css.indexOf( "transition:" ) != -1 ) { // Meglio usare un'espressione regolare
var $element = $( element ); // Elemento del selettore jQuery
var $selector = $( selector ); // Elemento del selettore CSS
if( $element.get( 0 ) === $selector.get( 0 ) ) { // Si tratta dello stesso elemento?
found = true;
}
}
}
return found;
};
Per semplificare il codice non ho usato un'espressione regolare, ma vi consiglio di farlo poiché il codice di cui sopra può selezionare
anche un elemento su cui è stato specificato transition: none
.