Come posso annullare l'impostazione dell'attributo CSS di un elemento utilizzando jQuery?

93

Se imposto un valore CSS su un elemento specifico utilizzando:

$('#element').css('background-color', '#ccc');

Voglio essere in grado di annullare l'impostazione di quel valore specifico dell'elemento e utilizzare il valore a cascata, sulla falsariga di:

$('#element').css('background-color', null);

Ma quella sintassi non sembra funzionare: è possibile utilizzando un'altra sintassi?

Modifica: il valore non viene ereditato dall'elemento genitore: i valori originali provengono da un selettore a livello di elemento. Ci scusiamo per l'eventuale confusione!

jquery css

— cdleary
fonte

140

Dai documenti jQuery :

L'impostazione del valore di una proprietà di stile su una stringa vuota, ad esempio $('#mydiv').css('color', ''), rimuove quella proprietà da un elemento se è già stata applicata direttamente, sia nell'attributo di stile HTML, tramite il .css()metodo di jQuery o tramite la manipolazione DOM diretta della styleproprietà. Tuttavia, non rimuove uno stile che è stato applicato con una regola CSS in un foglio di stile o <style>elemento.

— Glenn Moss
fonte

Mi sono imbattuto in questa domanda quando ho avuto questo problema. Nel mio caso stavo impostando l'attributo css in un styleattributo sul tag, quindi questo metodo non ha funzionato. Applicare lo stile con il .css()metodo invece che nel tag mi ha permesso di rimuoverlo in seguito.

— Glenn Moss

14

Penso che tu possa fare anche:

$('#element').css('background-color', '');

Questo è quello che facevo molto tempo fa per la displayproprietà in plain-old-javascript per mostrare / nascondere un campo.

— FryGuy
fonte

4

In realtà, la sintassi che pensavo non fosse corretta (con null) sembra funzionare: il mio selettore era formato in modo errato e quindi non produceva alcun elemento. D'oh!

— cdleary
fonte

21

A partire da jquery 1.4.3 css(..., null)non funziona e css(..., '')dovrebbe essere usato al suo posto - bugs.jquery.com/ticket/7233

— Tim Sylvester

3

Prova questo:

$('#element').css('background-color', 'inherit');

— HectorMac
fonte

1

Inherit purtroppo non è il comportamento che sto cercando: "la proprietà assume lo stesso valore calcolato della proprietà per l'elemento padre dell'elemento" da w3.org/TR/CSS2/cascade.html

— cdleary

Più probabilmente "iniziale" che "eredita". "Inherit" si adatta dal genitore, "Initial" fa quello che dice la parola.

— Chris S.

0

Per quello che vale questo sembra non funzionare in IE 8 per 'filtro', ho dovuto usare questo (in fadeIn callback):

$(this).attr('style', $(this).attr('style').replace(/\bfilter:\s*;*/, ''));

Ovviamente, avevo bisogno di rimuovere una dichiarazione di filtro in linea vuota in modo che il CSS potesse avere effetto; c'erano altre regole inline quindi non potevo semplicemente rimuovere l'attributo style.

— Brandon Hill
fonte

-1

Se può aiutare, aggiungo un problema con virgolette doppie:

$('#element').css("border-color", "");

non funziona finché

$('#element').css('border-color', '');

lavori

— merlintintin
fonte