¿Cómo puedo borrar todos los estilos en línea con javascript y dejar solo los estilos especificados en la hoja de estilo css?

94

Si tengo lo siguiente en mi html:

<div style="height:300px; width:300px; background-color:#ffffff;"></div>

Y esto en mi hoja de estilo CSS:

div {
    width:100px;
    height:100px;
    background-color:#000000;
}

¿Hay alguna forma, con javascript / jquery, de eliminar todos los estilos en línea y dejar solo los estilos especificados por la hoja de estilo css?

— Mate
fuente

166

$('div').attr('style', '');

o

$('div').removeAttr('style');(De la respuesta de Andrés )

Para hacer esto un poco más pequeño, intente esto:

$('div[style]').removeAttr('style');

Esto debería acelerarlo un poco porque verifica que los divs tengan el atributo de estilo.

De cualquier manera, esto puede tardar un poco en procesarse si tiene una gran cantidad de divs, por lo que es posible que desee considerar otros métodos además de javascript.

— Tyler Carter
fuente

Si tiene que eliminar el atributo de estilo, también tendrá que buscarlo, por lo que la última solución parece solo ensuciar el código en mi humilde opinión. Por supuesto, lo mejor sería seleccionar solo los elementos que necesita para eliminar el estilo, posiblemente a través de ID.

— Jose Faeti

Esto solo apuntará a divs. ¿Qué pasa si quieres apuntar a todo?

— farola

1

Como un lado relacionado, llamar .css()con una cadena vacía como segundo valor eliminará solo el valor nombrado de los estilos en línea, por ejemplo, $ ('div'). Css ('display', ''); eliminará solo la propiedad de visualización en línea (si está configurada).

— Tom Davies

2

@streetlight Úselo $('*').removeAttr('style')para apuntar a todo.

— Makaze

No, en realidad el segundo debería ser un poco más rápido porque si JQuery tiene algún sentido, entonces usará el atributo remove estándar. Además, está olvidando la sobrecarga masiva e ineficiente de recorrer más elementos DOM, lo que hace que el segundo método sea incluso más rápido que el primero.

32

JavaScript simple:

No necesitas jQuery para hacer algo trivial como esto. Solo usa el .removeAttribute()método.

Suponiendo que solo está apuntando a un solo elemento, puede usar fácilmente lo siguiente: (ejemplo)

document.querySelector('#target').removeAttribute('style');

Si está apuntando a varios elementos, simplemente recorra la colección de elementos seleccionada: (ejemplo)

var target = document.querySelectorAll('div');
Array.prototype.forEach.call(target, function(element){
    element.removeAttribute('style');
});

Array.prototype.forEach()- IE9 y superior / .querySelectorAll()- IE 8 (parcial) IE9 y superior.

— Josh Crozier
fuente

1

Una alternativa a Array.prototype.forEach.calles el operador splat bastante bien soportado, lo que ahorra una línea: [... document.querySelectorAll('div')].forEach(div => div.removeAttribute('style')).

22

$('div').removeAttr('style');

— andres descalzo
fuente

¿Es esto más eficiente que hacer attr ('style', '')?

— Matt

con $ ('div'). attr ('estilo', ''); <div style = ""> </div> con $ ('div'). removeAttr ('style'); <div> </div> es más limpio

— andres descalzo

probablemente, porque no lo establece en un valor nulo, pero de cualquier manera obtendrá un gran tiempo de procesamiento porque tiene que pasar por todos los div del cuerpo.

— Tyler Carter

sí, está claro, debería cambiarse a un ID $ ("# id") o una clase $ (".classDivs)

— andres descalzo

3

Estaba usando la $('div').attr('style', '');técnica y no funcionaba en IE8.

Produje el atributo de estilo usando alert()y no eliminaba los estilos en línea.

.removeAttr terminó haciendo el truco en IE8.

— venganza
fuente

3

Si solo necesita vaciar el stylede un elemento, entonces:
element.style.cssText = null;
Esto debería funcionar bien. ¡Espero eso ayude!

— Tushar Shukla
fuente

Una lógica similar parece aplicarse si se intenta "vaciar" solo una propiedad de estilo para un elemento: element.style.display = null;- eso es lo que necesitaba: D

— Bilal Akil

1

Esto se puede lograr en dos pasos:

1: seleccione el elemento que desea cambiar por nombre de etiqueta, id, clase, etc.

var element = document.getElementsByTagName('h2')[0];

eliminar el atributo de estilo

element.removeAttribute('style');

— JRulle
fuente

-2

¡También puede intentar incluir el CSS en la hoja de estilo como! Importante

— BoringCode
fuente

3

si bien esto funcionaría, es una práctica terrible anular los estilos en línea con! important para eliminarlos

— joshvermaire