Modifica della definizione della regola CSS utilizzando jQuery

Question

Supponiamo di voler modificare la larghezza di molti elementi, ad esempio per simulare una tabella. Mi rendo conto che si potrebbe fare questo:

$(".class").css('width', '421px'); 

Questo altera la linea style='width: 421px;' attributo per ogni elemento. Ora, quello che mi piacerebbe fare: è cambiare l'attuale definizione regola CSS:

.class { 
    width: 375px; ==[change to]==> 421px; 
} 

Quando si tratta di 100 di se non 1000 di nidificato <ul> e <li> che hanno bisogno di essere cambiato, sembra che questo sarebbe migliore per le prestazioni rispetto al tentativo di consentire a jQuery di eseguire il lavoro tramite il metodo .css().

ho trovato this example - questo è quello che sto cercando di fare:

var style = $('<style>.class { width: 421px; }</style>') 
$('html > head').append(style); 

non sto cercando di scambiare le classi ($el.removeClass().addClass()), perché non posso avere una classe per OGNI ottimale larghezza (379px, 387px, 402px ..).

Potrei creare un elemento <style> e impostare dinamicamente la larghezza, tuttavia penso che ci sia un modo migliore.

metodo

Answer 1

Native JS: can jquery manipulate the global css definition of the document?

jQuery Plugin da Ariel Flesler: https://github.com/flesler/jquery.rule

Answer 2

document.styleSheets [0] .addRule opere in Chrome, 'non una funzione' in FF

Answer 3

Cosa funziona per me è includere un blocco di stile vuoto nell'intestazione:

<style id="custom-styles"></style> 

E poi manipolare che con qualcosa di simile:

$('#custom-styles').text('h1 { background: red }') 

Ho provato questo sembra funzionare nella versione corrente di Chrome (o meglio, Cromo - 63,0) e Firefox (57.0.4).