È possibile rimuovere gli stili incorporati con jQuery?

Un plugin jQuery sta applicando uno stile inline ( display:block). Mi sento pigro e voglio scavalcarlo display:none.

Qual è il modo migliore (pigro)?

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

Ecco cosa mi è venuto in mente, e spero che questo sia utile - per te o per 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. Volevi sostituirlo, che, come già sottolineato, è facilmente eseguibile $('#element').css('display', 'inline').

Quello che cercavo era una soluzione per RIMUOVERE completamente lo stile in linea. Ho bisogno di questo per un plugin che sto scrivendo in cui devo impostare temporaneamente alcuni valori CSS incorporati, 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.

Eccolo in formato plugin:

(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 plugin nella pagina prima dello script, puoi semplicemente chiamare

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

e questo dovrebbe fare il trucco.

Aggiornamento : ora ho capito che tutto ciò è inutile. Puoi semplicemente impostarlo su vuoto:

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

e verrà automaticamente rimosso per te.

Ecco una citazione dai documenti :

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

Non penso che jQuery stia facendo magie qui; sembra che l' styleoggetto lo faccia in modo nativo .

.removeAttr("style") per sbarazzarsi di tutto il tag di stile ...

.attr("style") per testare il valore e vedere se esiste uno stile inline ...

.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 incorporato dovrebbe scomparire e l'oggetto dovrebbe adattare lo stile predefinito nei file CSS.

Ha funzionato per me!

Puoi impostare lo stile usando il cssmetodo 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

The Lazy Way (che indurrà i futuri designer a maledire il tuo nome e ucciderti nel sonno):

#myelement 
{
    display: none !important;
}

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

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

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

Se vuoi rimuovere una proprietà all'interno di un attributo di stile - non solo impostarla su qualcos'altro - fai uso del removeProperty()metodo:

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

AGGIORNAMENTO:
ho creato un violino interattivo per giocare con i diversi metodi e i loro risultati. Apparentemente, non c'è molta differenza tra set to empty string, set to faux valuee removeProperty(). Tutti generano lo stesso fallback, ovvero una regola CSS prestabilita o il valore predefinito del browser.

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 questo prima:

<input id="element" style="display: block;">

Ora il tuo elemento sarà simile a questo:

<input id="element" style="">

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();

Modifica il plug-in per non applicare più lo stile. Sarebbe molto meglio che rimuovere lo stile da allora in poi.

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

eccetera...

Lascia vuoto il secondo parametro!

$("#element").css({ display: "none" });

All'inizio ho provato a rimuovere lo stile inline in css, ma non funziona e il nuovo stile come display: nessuno verrà sovrascritto. Ma in JQuery funziona così.

Ho avuto un problema simile con la proprietà width. Non sono riuscito a rimuovere! Important dal codice, e dato che aveva bisogno di questo stile su un nuovo modello ho aggiunto un Id (modalstyling) all'elemento e successivamente ho aggiunto il seguente codice al modello:

<script type="text/javascript">
    $('#modalstyling').css('width', '');    //Removal of width !important
    $('#modalstyling').width('75%');        //Set custom width
</script>