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

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?

$('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.

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.

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

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.

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

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];

2. eliminar el atributo de estilo

element.removeAttribute('style');

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