2
votes

Style clair sur chaque élément DOM

J'essaie de trouver un moyen intelligent d'effacer la propriété de style précédemment modifiée sur chaque élément DOM.

Je sais qu'il existe un moyen d'effacer des styles comme celui-ci (la marge n'est qu'un exemple d'attribut):

element_name.style.margin = "";

Effacer de nombreux éléments avec de nombreux attributs de style de cette façon prendra des années, donc j'espère qu'il y a une solution "all_at_once". p>

javascript css

4 commentaires

Reproduction possible de Effacer tous les styles appliqués par Javascript

document. getElementsByTagName ('*'). removeAttribute ('style');

@BenjaminRussell Cela ne fonctionnera que si le style a été défini en ligne avec l'attribut style . Cela n'affectera pas les styles calculés.

Tout d'abord, vous devez configurer votre propre façon de suivre les éléments qui reçoivent des modifications CSS et d'enregistrer l'élément, la propriété CSS et la valeur d'origine. Il n'y a pas de moyen intégré de faire cela. Ensuite, vous pouvez parcourir cette liste d'éléments et restaurer les propriétés à leurs valeurs d'origine assez facilement.

4 Réponses :

0
votes

Vous pouvez obtenir tous les éléments en utilisant

<div>scscs</div>

Vous obtiendrez un objet avec tous les éléments numérotés clés . Object.keys vous donnera un tableau de toutes les clés et avec forEach vous pouvez itérer et appliquer le style ou toute manipulation aux éléments.

var elem = document.getElementsByTagName("*");
Object.keys(elem).forEach((e)=>elem[e].style.margin = "")

document.getElementsByTagName("*");

Ceci peut également être utilisé

<div>scscs</div>

var elem = document.querySelectorAll("*");
Object.keys(elem).forEach((e)=>elem[e].style.margin = "32px")

document.querySelectorAll("*")

Le document.getElementsByTagName ("*"); ne doit pas être utilisé en raison de problèmes de performances comme mentionné par @ScottMarcus dans les commentaires

1 commentaires

.getElementsByTagName () devrait rarement être utilisé de nos jours car il renvoie une liste de nœuds en direct, ce qui nuit aux performances. .querySelectorAll () est le meilleur choix. En outre, votre solution n'effacera le style que s'il a été défini en ligne avec l'attribut style . Cela n'effacera aucun style calculé. Cela change également chaque élément et l'OP dit qu'ils ne veulent changer que les éléments qui ont subi des changements.

0
votes

Cela effacera le style de toutes les balises:

<div style="background-color: beige">
  <span style="color: red">Hello</span>
  <p style="world">World</p>
</div>

const tags = document.querySelectorAll("*");

for (let i of tags) {
     i.style = '';
}

Vous pouvez également utiliser i.removeAttribute ('style'); pour supprimer l'attribut style .

2 commentaires

@ScottMarcus merci pour vos commentaires. J'ai édité ma réponse.

0
votes

.cssText a>

.cssText traite la valeur entière de .style comme une chaîne:

<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>

Cette expression collectera toutes les balises de la balise et écrasera toutes les propriétés .style .

Démo h2>

document.documentElement.querySelectorAll('*').forEach(tag => tag.style.cssText = '');

document.documentElement.querySelectorAll('*').forEach(tag => tag.style.cssText = '');

0 commentaires

0
votes

Vous devez supprimer les styles en ligne et désactiver les feuilles de style:

<h1 style="background:navy">My color was set in stylesheet<br>and background was set inline</h1>
<button onclick="clearStyles()">Clear styles</button>

h1 {
  color: pink
}

function clearStyles() {
  // remove inline styles:
  document.querySelectorAll('*').forEach(e => e.style = null);

  // disable stylesheets:
  Object.values(document.styleSheets).forEach(v => v.disabled = true);
}

0 commentaires