JQuery può cambiare la definizione di stile css? (non i singoli css di ciascun elemento)

Non ho visto nessun documento che dica che jQuery può cambiare qualsiasi definizione di CSS come cambiare

td { padding: 0.2em 1.2em } 

a

 td { padding: 0.32em 2em } 

ma entrambi devono cambiare un intero foglio di stile, o cambiare class di ogni elemento, o cambiare css di ogni elemento.

È ansible modificare la definizione dello stile?

C’è l’accesso DOM ai fogli di stile, ma è una di quelle cose che tendiamo ad evitare perché IE ha bisogno di un carico di compatibilità cruft.

Un modo migliore sarebbe in genere quello di triggersre il cambiamento indirettamente, utilizzando una semplice modifica di class su un antenato:

 td { padding: 0.2em 1.2em } body.changed td { padding: 0.32em 2em } 

Ora solo $('body').addClass('changed') e tutti gli aggiornamenti di td s.

Se devi davvero frobare i fogli di stile:

 var sheet= document.styleSheets[0]; var rules= 'cssRules' in sheet? sheet.cssRules : sheet.rules; // IE compatibility rules[0].style.padding= '0.32em 2em'; 

Ciò presuppone che la regola td in questione sia la prima regola del primo foglio di stile. In caso contrario, potrebbe essere necessario cercarlo ripetendo le regole cercando il giusto selettore. Oppure aggiungi semplicemente una nuova regola alla fine, ignorando quella precedente:

 if ('insertRule' in sheet) sheet.insertRule('td { padding: 0.32em 2em }', rules.length); else // IE compatibility sheet.addRule('td', 'padding: 0.32em 2em', rules.length); 

jQuery non fornisce strumenti speciali per accedere ai fogli di stile, ma è ansible che ci siano plugin che potrebbero.

 $('head').append(''); 

Ho aggiunto un attributo id in modo che tu possa scegliere come target e rimuoverlo quando non desideri più applicare la modifica.

 $('#customCSS').remove(); 

Mi sono imbattuto in un problema in cui non conoscevo la larghezza desiderata per una class finché non è stata caricata e l’ho eseguita.

  

Nota: può importare dove si inserisce lo script (anteporre, aggiungere) a seconda di come si desidera che le regole vengano “a cascata”.

No, semplicemente non funziona in questo modo … non sono sicuro che sia un modo migliore per spiegarlo di quello 🙂

jQuery è stato progettato per funzionare su elementi … se lo stai facendo per i test, Firebug della console Chrome sono comunque opzioni.

Qualcosa che potresti fare è avere un foglio di stile generato lato server, ad esempio come lo fa ThemeRoller , e jQuery (o vanilla JS) aggiunge dynamicmente quel nella tua intestazione, qualcosa del tipo:

  

Se era l’ultimo collegamento, avrebbe sovrascritto lo stile precedentemente definito … in effetti questo è esattamente il modo in cui funziona ThemeRoller.