É possível remover estilos embutidos com o jQuery?

Um plugin jQuery está aplicando um estilo embutido ( display:block). Estou com preguiça e quero substituí-lo display:none.

Qual é a melhor maneira (preguiçosa)?

Atualização: enquanto a seguinte solução funciona, há um método muito mais fácil. Ver abaixo.

Aqui está o que eu criei, e espero que isso seja útil - para você ou qualquer outra pessoa:

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

Isso removerá esse estilo embutido.

Não tenho certeza se é isso que você queria. Você queria substituí-lo, o que, como já foi mencionado, é facilmente realizado $('#element').css('display', 'inline').

O que eu procurava era uma solução para REMOVER completamente o estilo embutido. Eu preciso disso para um plug-in que estou escrevendo, onde tenho que definir temporariamente alguns valores CSS embutidos, mas quero removê-los posteriormente; Quero que a folha de estilo retome o controle. Eu poderia fazer isso armazenando todos os seus valores originais e depois colocando-os de volta na linha, mas essa solução me parece muito mais limpa.

Aqui está no formato do 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 você incluir esse plug-in na página antes do seu script, poderá chamar

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

e isso deve fazer o truque.

Atualização : agora percebi que tudo isso é inútil. Você pode simplesmente configurá-lo para em branco:

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

e ele será removido automaticamente para você.

Aqui está uma citação dos documentos :

Definir o valor de uma propriedade de estilo como uma string vazia - por exemplo $('#mydiv').css('color', '')- remove essa propriedade de um elemento se já tiver sido aplicada diretamente, seja no atributo de estilo HTML, através do .css()método do jQuery ou através da manipulação direta DOM da propriedade de estilo. No entanto, ele não remove um estilo que foi aplicado com uma regra CSS em uma folha de estilo ou <style>elemento.

Eu não acho que o jQuery esteja fazendo nenhuma mágica aqui; parece que o styleobjeto faz isso de forma nativa .

.removeAttr("style") para se livrar de toda a etiqueta de estilo ...

.attr("style") para testar o valor e verificar se existe um estilo embutido ...

.attr("style",newValue) para configurá-lo para outra coisa

A maneira mais fácil de remover estilos embutidos (gerados pelo jQuery) seria:

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

O código embutido deve desaparecer e seu objeto deve adaptar o estilo predefinido nos seus arquivos CSS.

Trabalhou para mim!

Você pode definir o estilo usando o cssmétodo jQuery :

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

você pode criar um plugin jquery como este:

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

A maneira preguiçosa (que fará com que futuros designers amaldiçoem seu nome e o matem enquanto dorme):

#myelement 
{
    display: none !important;
}

Isenção de responsabilidade: não defendo essa abordagem, mas certamente é o caminho preguiçoso.

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

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

Se você deseja remover uma propriedade dentro de um atributo de estilo - e não apenas configurá-la para outra coisa -, use o removeProperty()método:

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

ATUALIZAÇÃO:
Eu criei um violino interativo para brincar com os diferentes métodos e seus resultados. Aparentemente, não há muita diferença entre set to empty string, set to faux valuee removeProperty(). Todos eles resultam no mesmo fallback - que é uma regra CSS predefinida ou o valor padrão do navegador.

Caso a exibição seja o único parâmetro do seu estilo, você pode executar este comando para remover todo o estilo:

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

Significa que, se seu elemento tivesse a seguinte aparência:

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

Agora seu elemento ficará assim:

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

Aqui está um filtro seletor inlineStyle que escrevi que se conecta ao jQuery.

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

No seu caso, você pode usar isso como:

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

Altere o plug-in para não aplicar mais o estilo. Isso seria muito melhor do que remover o estilo depois.

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

etc ...

Apenas deixe o segundo param em branco!

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

No começo, tentei remover o estilo embutido no css, mas ele não funciona e o novo estilo como a exibição: nenhum será substituído. Mas no JQuery funciona assim.

Eu tive um problema semelhante com a propriedade width. Eu não consegui remover o! Important do código, e como ele precisava desse estilo em um novo modelo, adicionei um ID (modalstyling) ao elemento e depois adicionei o seguinte código ao modelo:

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