Se è necessario modificare lo stile di un elemento con JavaScript, in genere è meglio modificare il nome di una classe e fare in modo che il CSS già presente nella pagina abbia effetto e modificare lo stile. Tuttavia, ci sono eccezioni a ogni regola. Ad esempio, potresti voler cambiare programmaticamente la pseudo-classe (ad esempio :hover). Non puoi farlo tramite JavaScript per lo stesso motivo per cui gli style=""attributi inline non possono cambiare le pseudo classi.
Dovrai inserire un nuovo elemento nella pagina con gli stili corretti. Meglio iniettarlo nella parte inferiore della pagina in modo che sovrascriva il tuo CSS sopra di esso. Facile con jQuery:
function injectStyles(rule) ( var div = $(" ", ( html: '-' + rule + '' )).appendTo("body"); )Utilizzo
injectStyles('a:hover ( color: red; )');Demo
Maggiori informazioni
- Le stranezze dell'iniezione di stile in IE (Ryan Seddon).
- Filo di overflow dello stack.