Comment puis-je effacer tous les styles en ligne avec javascript et ne laisser que les styles spécifiés dans la feuille de style css?

Si j'ai ce qui suit dans mon html:

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

Et ceci dans ma feuille de style css:

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

Existe-t-il un moyen, avec javascript / jquery, de supprimer tous les styles en ligne et de ne laisser que les styles spécifiés par la feuille de style css?

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

ou

$('div').removeAttr('style');(D'après la réponse d'Andres )

Pour rendre cela un peu plus petit, essayez ceci:

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

Cela devrait accélérer un peu car cela vérifie que les divs ont l'attribut style.

Dans tous les cas, cela peut prendre un peu de temps à traiter si vous avez un grand nombre de divs, vous pouvez donc envisager d'autres méthodes que javascript.

JavaScript simple:

Vous n'avez pas besoin de jQuery pour faire quelque chose de trivial comme celui-ci. Utilisez simplement la .removeAttribute()méthode.

En supposant que vous ne ciblez qu'un seul élément, vous pouvez facilement utiliser ce qui suit: (exemple)

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

Si vous ciblez plusieurs éléments, parcourez simplement la collection d'éléments sélectionnée: (exemple)

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

Array.prototype.forEach()- IE9 et supérieur / .querySelectorAll()- IE 8 (partiel) IE9 et supérieur.

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

J'utilisais la $('div').attr('style', '');technique et cela ne fonctionnait pas dans IE8.

J'ai sorti l'attribut de style en utilisant alert()et il ne supprimait pas les styles en ligne.

.removeAttr a fini par faire l'affaire dans IE8.

Si vous devez simplement vider styleun élément, alors:
element.style.cssText = null;
Cela devrait faire du bien. J'espère que ça aide!

Cela peut être accompli en deux étapes:

1: sélectionnez l'élément que vous souhaitez modifier par nom de variable, id, classe, etc.

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

2. supprimer l'attribut de style

element.removeAttribute('style');

Vous pouvez également essayer de lister le CSS dans la feuille de style comme! Important