modificare un oggetto regola CSS con javascript

Question

Eventuali duplicati:
Changing a CSS rule-set from Javascript

Mi chiedevo se c'è qualche possibilità di modificare fogli di stile Css dichiarazioni senza passare per la linea styling.

Ecco un rapido esempio:

<style> 
    .box {color:green;} 
    .box:hover {color:blue;} 
</style> 

<div class="box">TEXT</div> 

che dà un riquadro blu scritto che diventa verde scritta al passaggio del mouse.

Se mi danno uno stile in linea per il colore, sarà perso il comportamento hover:

<div class="box" style="color:red;">TEXT</box> 

che dà un contenitore di scritta rossa, non importa quale.

Quindi la mia domanda è, come si può accedere e modificare l'oggetto dichiarazione CSS piuttosto che sovrascrivere gli stili con quelli in linea.

Grazie,

Answer 1

È possibile utilizzare il cssRules sull'oggetto DOM foglio di stile che corrisponde al vostro foglio di stile originale per modificare la regola.

var sheet = document.styleSheets[0]; 
var rules = sheet.cssRules || sheet.rules; 

rules[0].style.color = 'red'; 

Nota che IE utilizza rules invece di cssRules.

Ecco una dimostrazione: http://jsfiddle.net/8Mnsf/1/

Answer 2

Basta definire le vostre classi e assegnare/rimuovere le classi agli elementi HTML con Javascript.

Assegnare direttamente uno stile a un elemento, ha la priorità più alta, sostituirà tutte le altre regole CSS.

EDIT:

si consiglia di utilizzare cssText proprietà

vedi esempio qui cssText property