¿Es posible eliminar estilos en línea con jQuery?

Un complemento jQuery está aplicando un estilo en línea ( display:block). Me siento flojo y quiero anularlo display:none.

¿Cuál es la mejor manera (perezosa)?

Actualización: mientras la siguiente solución funciona, hay un método mucho más fácil. Vea abajo.

Esto es lo que se me ocurrió, y espero que esto sea útil para usted o para cualquier otra persona:

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

Esto eliminará ese estilo en línea.

No estoy seguro de que esto sea lo que querías. Querías anularlo, lo cual, como ya se señaló, se hace fácilmente por$('#element').css('display', 'inline') .

Lo que estaba buscando era una solución para ELIMINAR completamente el estilo en línea. Necesito esto para un complemento que estoy escribiendo donde tengo que establecer temporalmente algunos valores CSS en línea, pero quiero eliminarlos más tarde; Quiero que la hoja de estilo recupere el control. Podría hacerlo almacenando todos sus valores originales y luego volviéndolos a poner en línea, pero esta solución me parece mucho más limpia.

Aquí está en formato de complemento:

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

Si incluye este complemento en la página anterior a su secuencia de comandos, puede llamar

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

y eso debería hacer el truco.

Actualización : ahora me di cuenta de que todo esto es inútil. Simplemente puede configurarlo en blanco:

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

y se eliminará automáticamente por ti.

Aquí hay una cita de los documentos :

Establecer el valor de una propiedad de estilo en una cadena vacía, por ejemplo $('#mydiv').css('color', ''), elimina esa propiedad de un elemento si ya se ha aplicado directamente, ya sea en el atributo de estilo HTML, a través del .css()método de jQuery o mediante la manipulación DOM directa de la propiedad de estilo. Sin embargo, no elimina un estilo que se ha aplicado con una regla CSS en una hoja de estilo o <style>elemento.

No creo que jQuery esté haciendo magia aquí; Parece que el styleobjeto hace esto de forma nativa .

.removeAttr("style") para deshacerse de toda la etiqueta de estilo ...

.attr("style") para probar el valor y ver si existe un estilo en línea ...

.attr("style",newValue) para configurarlo en otra cosa

La forma más fácil de eliminar estilos en línea (generados por jQuery) sería:

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

El código en línea debería desaparecer y su objeto debería adaptar el estilo predefinido en sus archivos CSS.

¡Trabajó para mi!

Puede configurar el estilo utilizando el cssmétodo de jQuery :

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

puedes crear un complemento 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

La manera perezosa (que hará que los futuros diseñadores maldigan tu nombre y te asesinen mientras duermes):

#myelement 
{
    display: none !important;
}

Descargo de responsabilidad: no defiendo este enfoque, pero sin duda es la manera perezosa.

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

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

Si desea eliminar una propiedad dentro de un atributo de estilo, no solo establecerla en otra cosa, utilice el removeProperty()método:

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

ACTUALIZACIÓN:
Hice un violín interactivo para jugar con los diferentes métodos y sus resultados. Aparentemente, no hay mucha diferencia entre set to empty string, set to faux valuey removeProperty(). Todos dan como resultado la misma alternativa, que es una regla CSS predeterminada o el valor predeterminado del navegador.

En caso de que la pantalla sea el único parámetro de su estilo, puede ejecutar este comando para eliminar todo el estilo:

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

Significa que si su elemento se veía así antes:

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

Ahora su elemento se verá así:

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

Aquí hay un filtro selector de inlineStyle que escribí que se conecta a jQuery.

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

En su caso, podría usar esto como:

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

Cambie el complemento para que ya no aplique el estilo. Eso sería mucho mejor que eliminar el estilo posterior.

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

etc ...

¡Solo deja el segundo parámetro en blanco!

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

Al principio traté de eliminar el estilo en línea en CSS, pero no funciona y el nuevo estilo como pantalla: ninguno se sobrescribirá. Pero en JQuery funciona así.

Tuve un problema similar con la propiedad de ancho. No pude eliminar el! Important del código, y dado que necesitaba este estilo en una nueva plantilla, agregué un Id (modalstyling) al elemento y luego agregué el siguiente código a la plantilla:

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