jQuery può cambiare la definizione dello stile css? (Css non individuale di ogni elemento)

Question

non ho visto alcun docs dicendo jQuery può cambiare qualsiasi definizione CSS come cambiare

td { padding: 0.2em 1.2em } 

a

td { padding: 0.32em 2em } 

ma o dover cambiare un intero stile foglio, o cambiare classe di ogni elemento, o cambiare css di ogni elemento.

Sta cambiando la definizione di stile possibile?

Answer 1

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 tipicamente per innescare il cambiamento indiretto, utilizzando un semplice cambiamento di classe su un antenato:

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

Ora basta $('body').addClass('changed') e tutto il td s aggiornamento.

Se davvero si deve frob 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'; 

questo presuppone che la norma td in questione è la prima regola nel primo foglio di stile. In caso contrario, potrebbe essere necessario cercarlo ripetendo le regole cercando il giusto selettore. O semplicemente aggiungere una nuova regola fino alla fine, ignorando quello vecchio:

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 per sé non dà alcun attrezzo speciale per accedere ai fogli di stile, ma è possibile che ci sono plugin che potrebbero.

Answer 2

No, semplicemente non funziona in questo modo ... non è sicuro un modo migliore per spiegarlo a quello :)

jQuery è stato progettato per funzionare su elementi ... se si sta facendo questo per test, Firebug della console Chrome sono comunque opzioni.

Qualcosa che poteva fare, è di avere un foglio di stile sul lato server generato, ad esempio come ThemeRoller lo fa, e jQuery (o JS vaniglia) aggiunge in modo dinamico che <link> nella vostra intestazione, qualcosa di simile:

<link rel="stylesheet" href="myCSS.php?tdPad=.32|2" type="text/css" /> 

Se si tratta dell'ultimo collegamento, sostituisce lo stile precedentemente definito ... infatti questo è esattamente come funziona ThemeRoller.

Answer 3

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

<script> 
$(function() { 
    calcWidth = CalculateWidth(); 

    $('body').prepend('<style> .dynamicWidth { width: ' + calcWidth + 'px } </style>'); 
} 
</script> 

Nota: può importa dove mettete lo script (anteporre, aggiungere) a seconda di come si desidera che le regole per 'a cascata'.

Answer 4

$('head').append('<style id="customCSS">td { padding: 0.32em 2em }</style>'); 

Ho aggiunto un attributo id in modo da poterlo targetizzare e rimuovere quando non si desidera più applicare tale modifica.

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