Come posso cancellare tutti gli stili in linea con javascript e lasciare solo gli stili specificati nel foglio di stile CSS?

94

Se ho quanto segue nel mio html:

<div style="height:300px; width:300px; background-color:#ffffff;"></div>

E questo nel mio foglio di stile CSS:

div {
    width:100px;
    height:100px;
    background-color:#000000;
}

Esiste un modo, con javascript / jquery, per rimuovere tutti gli stili inline e lasciare solo gli stili specificati dal foglio di stile CSS?

— opaco
fonte

166

$('div').attr('style', '');

o

$('div').removeAttr('style');(Dalla risposta di Andres )

Per renderlo un po 'più piccolo, prova questo:

$('div[style]').removeAttr('style');

Questo dovrebbe velocizzarlo un po 'perché controlla che i div abbiano l'attributo style.

In ogni caso, l'elaborazione potrebbe richiedere un po 'di tempo se hai una grande quantità di div, quindi potresti prendere in considerazione altri metodi oltre a javascript.

— Tyler Carter
fonte

Se deve rimuovere l'attributo style, dovrà anche cercarlo, quindi l'ultima soluzione sembra solo rendere il codice più sporco imho. La cosa migliore ovviamente sarebbe selezionare solo gli elementi necessari per rimuovere lo stile, possibilmente tramite ID.

— Jose Faeti

Questo avrà come target solo i div. E se volessi indirizzare tutto?

— lampione

1

Per inciso, chiamare .css()con una stringa vuota come secondo valore rimuoverà solo il valore nominato dagli stili in linea, ad esempio $ ('div'). Css ('display', ''); rimuoverà solo la proprietà di visualizzazione in linea (se impostata).

— Tom Davies,

2

@streetlight Utilizzare $('*').removeAttr('style')per indirizzare tutto.

— Makaze

No, in realtà il secondo dovrebbe essere un po 'più veloce perché se JQuery ha un senso, utilizzerà lo standard removeattribute. Inoltre, stai dimenticando l'enorme sovraccarico inefficiente del looping attraverso più elementi DOM che rende il secondo metodo ancora più veloce del primo.

32

JavaScript normale:

Non hai bisogno di jQuery per fare qualcosa di banale come questo. Usa il .removeAttribute()metodo.

Supponendo che tu stia mirando solo a un singolo elemento, puoi facilmente utilizzare quanto segue: (esempio)

document.querySelector('#target').removeAttribute('style');

Se stai prendendo di mira più elementi, fai semplicemente scorrere la raccolta di elementi selezionata: (esempio)

var target = document.querySelectorAll('div');
Array.prototype.forEach.call(target, function(element){
    element.removeAttribute('style');
});

Array.prototype.forEach() - IE9 e versioni successive / .querySelectorAll() - IE 8 (parziale) IE9 e versioni successive.

— Josh Crozier
fonte

1

Un'alternativa a Array.prototype.forEach.callè l'operatore splat abbastanza ben supportato, che salva una linea: [... document.querySelectorAll('div')].forEach(div => div.removeAttribute('style')).

22

$('div').removeAttr('style');

— andres descalzo
fonte

È più efficiente che eseguire attr ('style', '')?

— Matt

con $ ('div'). attr ('style', ''); <div style = ""> </div> con $ ('div'). removeAttr ('style'); <div> </div> è più pulito

— andres descalzo il

probabilmente, perché non lo imposta su un valore nullo, ma in ogni caso otterrai un tempo di elaborazione elevato perché deve passare attraverso ogni div nel corpo.

— Tyler Carter

sì, è chiaro, dovrebbe essere cambiato in un ID $ ("# id") o in una classe $ (".classDivs)

— andres descalzo

3

Stavo usando la $('div').attr('style', '');tecnica e non funzionava in IE8.

Ho emesso l'attributo style usando alert() e non stava eliminando gli stili in linea.

.removeAttr finito per fare il trucco in IE8.

— rtvenge
fonte

3

Se hai bisogno di svuotare solo il styledi un elemento, allora:
element.style.cssText = null;
Questo dovrebbe andare bene. Spero che sia d'aiuto!

— Tushar Shukla
fonte

Una logica simile sembra applicarsi se si cerca di "svuotare" solo una singola proprietà di stile per un elemento: element.style.display = null;- è quello che mi serviva: D

— Bilal Akil

1

Questa operazione può essere eseguita in due passaggi:

1: seleziona l'elemento che desideri modificare per nome tag, id, classe ecc.

var element = document.getElementsByTagName('h2')[0];

rimuovere l'attributo style

element.removeAttribute('style');

— JRulle
fonte

-2

Puoi anche provare a elencare il css nel foglio di stile come! Important

— BoringCode
fonte

3

anche se funzionerebbe, è una pratica terribile ignorare gli stili in linea con! important per rimuoverli

— joshvermaire