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?

94

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?

— Mat
source

166

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

— Tyler Carter
source

S'il doit supprimer l'attribut style, il devra également le rechercher, donc la dernière solution semble ne faire que rendre le code plus sale à mon humble avis. Le mieux serait bien sûr de ne sélectionner que les éléments dont vous avez besoin pour supprimer le style, éventuellement via ID.

— Jose Faeti

Cela ne ciblera que les div. Et si vous voulez tout cibler?

— lampadaire

1

Par ailleurs, l'appel .css()avec une chaîne vide comme deuxième valeur supprimera uniquement la valeur nommée des styles en ligne, par exemple $ ('div'). Css ('display', ''); supprimera uniquement la propriété d'affichage en ligne (si définie).

— Tom Davies

2

@streetlight Permet $('*').removeAttr('style')de tout cibler.

— Makaze

Non, en fait, le second devrait être un peu plus rapide car si JQuery a un sens, il utilisera le removeattribute standard. En outre, vous oubliez l'énorme surcharge inefficace de la boucle à travers plus d'éléments DOM, ce qui rend la deuxième méthode encore plus rapide que la première.

32

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.

— Josh Crozier
source

1

Une alternative à l' Array.prototype.forEach.callest l'opérateur floc assez bien pris en charge, ce qui permet d' économiser une ligne: [... document.querySelectorAll('div')].forEach(div => div.removeAttribute('style')).

22

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

— andres descalzo
source

Est-ce plus efficace que de faire attr ('style', '')?

— Matt

avec $ ('div'). attr ('style', ''); <div style = ""> </div> avec $ ('div'). removeAttr ('style'); <div> </div> est plus propre

— andres descalzo

probablement, car il ne le définit pas sur une valeur nulle, mais dans tous les cas, vous obtiendrez un temps de traitement important car il doit passer par chaque div du corps.

— Tyler Carter

oui, c'est clair, il devrait être changé en un ID $ ("# id") ou une classe $ (".classDivs)

— andres descalzo

3

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.

— rtvenge
source

3

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

— Tushar Shukla
source

Une logique similaire semble s'appliquer si vous essayez de "vider" une seule propriété de style pour un élément: element.style.display = null;- c'est ce dont j'avais besoin: D

— Bilal Akil

1

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

supprimer l'attribut de style

element.removeAttribute('style');

— JRulle
source

-2

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

— BoringCode
source

3

bien que cela fonctionne, il est très pratique de remplacer les styles en ligne avec! important afin de les supprimer

— joshvermaire