È ansible rimuovere gli stili in linea con jQuery?

Un plugin jQuery applica uno stile in linea ( display:block ). Mi sento pigro e voglio sovrascriverlo con display:none .

Qual è il modo migliore (pigro)?

Aggiornamento: mentre la seguente soluzione funziona, c’è un metodo molto più semplice. Vedi sotto.


Ecco cosa mi è venuto in mente, e spero che questo sia utile – a te oa chiunque altro:

 $('#element').attr('style', function(i, style) { return style && style.replace(/display[^;]+;?/g, ''); }); 

Questo rimuoverà quello stile in linea.

Non sono sicuro che questo è quello che volevi. Si voleva sovrascriverlo, cosa che, come già sottolineato, è facilmente eseguita da $('#element').css('display', 'inline') .

Quello che stavo cercando era una soluzione per RIMUOVERE completamente lo stile in linea. Ho bisogno di questo per un plugin che sto scrivendo dove devo impostare temporaneamente alcuni valori CSS inline, ma voglio rimuoverli in seguito; Voglio che il foglio di stile riprenda il controllo. Potrei farlo memorizzando tutti i suoi valori originali e poi rimettendoli in linea, ma questa soluzione mi sembra molto più pulita.


Qui è in formato plug-in:

 (function($) { $.fn.removeStyle = function(style) { var search = new RegExp(style + '[^;]+;?', 'g'); return this.each(function() { $(this).attr('style', function(i, style) { return style && style.replace(search, ''); }); }); }; }(jQuery)); 

Se includi questo plug-in nella pagina prima del tuo script, puoi semplicemente chiamare

 $('#element').removeStyle('display'); 

e quello dovrebbe fare il trucco.


Aggiornamento : ora mi sono reso conto che tutto ciò è inutile. Puoi semplicemente impostarlo su bianco:

 $('#element').css('display', ''); 

e verrà automaticamente rimosso per te.

Ecco una citazione dai documenti :

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 nello stile HTML attributo, tramite il metodo .css() di jQuery o tramite la manipolazione diretta DOM della proprietà style. Tuttavia, non rimuove uno stile che è stato applicato con una regola CSS in un foglio di stile o un elemento

.

Non penso che jQuery stia facendo qualsiasi magia qui; sembra che l'object di style faccia in modo nativo .

.removeAttr("style") per eliminare l’intero tag di stile …

.attr("style") per verificare il valore e vedere se esiste uno stile in linea …

.attr("style",newValue) per impostarlo su qualcos’altro

Il modo più semplice per rimuovere gli stili incorporati (generati da jQuery) sarebbe:

 $(this).attr("style", ""); 

Il codice inline dovrebbe scomparire e il tuo object dovrebbe adattare lo stile predefinito nei tuoi file CSS.

Ha funzionato per me!

Puoi impostare lo stile usando il metodo css di jQuery:

 $('something:visible').css('display', 'none'); 

puoi creare un plugin jQuery come questo:

 jQuery.fn.removeInlineCss = (function(){ var rootStyle = document.documentElement.style; var remover = rootStyle.removeProperty // modern browser || rootStyle.removeAttribute // old browser (ie 6-8) return function removeInlineCss(properties){ if(properties == null) return this.removeAttr('style'); proporties = properties.split(/\s+/); return this.each(function(){ for(var i = 0 ; i < proporties.length ; i++) remover.call(this.style, proporties[i]); }); }; })(); 

uso

 $(".foo").removeInlineCss(); //remove all inline styles $(".foo").removeInlineCss("display"); //remove one inline style $(".foo").removeInlineCss("color font-size font-weight"); //remove several inline styles 

La via Lazy (che farà sì che i futuri designer maledicano il tuo nome e ti uccidano nel sonno):

 #myelement { display: none !important; } 

Disclaimer: Io non sostengo questo approccio, ma certamente è il modo pigro.

 $('div[style*=block]').removeAttr('style'); 
 $("[style*=block]").hide(); 

Nel caso in cui il display sia l’unico parametro del tuo stile, puoi eseguire questo comando per rimuovere tutto lo stile:

 $('#element').attr('style',''); 

Significa che se il tuo elemento era simile a prima:

  

Ora il tuo elemento sarà simile a questo:

  

Se si desidera rimuovere una proprietà all’interno di un attributo di stile – non solo impostarla su qualcos’altro – si fa uso del metodo removeProperty() :

 document.getElementById('element').style.removeProperty('display'); 

AGGIORNARE:
Ho creato un violino interattivo per giocare con i diversi metodi e i loro risultati. Apparentemente, non c’è molta differenza tra il set to empty string , il set to faux value e removeProperty() . Tutti hanno come risultato lo stesso fallback, che è una regola CSS predeterminata o il valore predefinito del browser.

Ecco un filtro selettore inlineStyle che ho scritto che si collega a jQuery.

 $("div:inlineStyle(display:block)") // will select all divs with an inline style of display: block set 

Nel tuo caso potresti usare questo come:

 $("div:inlineStyle(display:block)").hide(); 

Cambia il plugin per non applicare più lo stile. Sarebbe molto meglio che rimuovere lo stile lì dopo.

$el.css({ height : '', 'margin-top' : '' });

eccetera…

Basta lasciare vuoto il 2 ° param!