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

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

¿Cuál es la mejor forma (floja)?

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 ti 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ía anularlo, lo cual, como ya se señaló, se hace fácilmente con $('#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 Estoy escribiendo donde tengo que establecer temporalmente algunos valores CSS en línea, pero quiero eliminarlos más adelante; 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 antes de su script, puede simplemente 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 estilo HTML atributo, a través del método .css() jQuery, o mediante la manipulación DOM directa de la propiedad de estilo. Sin embargo, no elimina un estilo que se haya aplicado con una regla CSS en una hoja de estilo o en un elemento

.

No creo que jQuery esté haciendo magia aquí; parece que el objeto de style hace 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 establecerlo en otra cosa

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

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

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

¡Trabajó para mi!

Puede establecer el estilo con el método de css de jQuery:

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

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

The Lazy way (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(); 

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:

  

Ahora tu elemento se verá así:

  

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

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

ACTUALIZAR:
He creado 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 value y removeProperty() . Todos dan como resultado la misma alternativa, que es una regla CSS preestablecida o el valor predeterminado del navegador.

Aquí hay un filtro selector de estilo en línea que escribí que se conecta a jQuery.

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

En tu caso, podrías usar esto como:

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

Cambia el complemento para no aplicar el estilo. Eso sería mucho mejor que eliminar el estilo allí después.

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

etc …

¡Solo deja el 2º param en blanco!