web-dev-qa-db-fra.com

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 les éléments suivants 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;
}

Est-il possible, avec javascript/jquery, de supprimer tous les styles en ligne et de ne conserver que les styles spécifiés par la feuille de style css?

javascriptjquerycssinline
90
Matt

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

ou

$('div').removeAttr('style'); (de 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 div ont l'attribut style.

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

158
Tyler Carter

JavaScript simple:

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

En supposant que vous ne visiez qu'un seul élément, vous pouvez facilement utiliser les éléments suivants: (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 au dessus de.

28
Josh Crozier
$('div').removeAttr('style');
22
andres descalzo

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

3
Tushar Shukla

J'utilisais la technique $('div').attr('style', ''); 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 le tour dans IE8.

3
rtvenge

Cela peut être accompli en deux étapes:

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

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

  1. supprimer l'attribut de style

element.removeAttribute('style');

1
JRulle