jQuery: selezionare un elemento in base agli stili del codice CSS

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.