javascript - selectors - etiquetas css

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

Question

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 manera, con javascript / jquery, para eliminar todos los estilos en línea y dejar solo los estilos especificados por la hoja de estilos css?

Answer 1

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

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

.removeAttr terminó haciendo el truco en IE8.

Answer 2

Esto se puede lograr en dos pasos:

1: selecciona el elemento que deseas cambiar por tagname, id, class, etc.

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

2. eliminar el atributo de estilo

element.removeAttribute(''style'');

Answer 3

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

Answer 4

También puede intentar incluir el css en la hoja de estilo como importante.

Answer 5

$(''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 comprueba que los divs tienen el atributo de estilo.

De cualquier forma, esto podría demorar 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.

Answer 6

JavaScript simple:

No necesitas jQuery para hacer algo trivial como este. Simplemente use el método .removeAttribute() .

Suponiendo que solo está orientando un solo elemento, puede usar fácilmente lo siguiente: (example)

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

Si se dirige a múltiples elementos, simplemente recorra la colección de elementos seleccionados: (example)

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.

Answer 7

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