Modifier ou échanger le CSS de plusieurs éléments HTML à la fois

J'ai environ 100 <span class="foo">, 100 et 100 <span class="bar"><span class="baz"> balises dans mon document. J'ai besoin d'implémenter les opérations suivantes en JavaScript:Modifier ou échanger le CSS de plusieurs éléments HTML à la fois

Changez l'arrière-plan tous les foos en rouge, toutes les barres en vert, tous les bazes en bleu.
Changez le fond tous les foos en vert, toutes les barres en bleu, tous les bazes en rouge.
Changez l'arrière-plan tous les foos en bleu, toutes les barres en rouge, tous les bazes en vert.

Je vais appeler ces opérations environ 1000 fois au total, donc je voudrais éviter une solution qui ajoute une étiquette <style> au <head> chaque fois que je fais une opération.

Y at-il quelque chose plus simple ou plus rapide ou mieux que itérer sur tous les éléments <span> avec document.getElementsByTagName('span'), et modifiant ou en ajoutant aux .className propriétés DOM pour chaque élément?

Source

2010-02-21 kat

La méthode la plus simple consiste à utiliser CSS pour cela, plutôt que de changer les noms de classes d'éléments. Considérez le balisage suivant et CSS.

.normal .foo{ 
    background-color: #0f0; 
} 
.alternate .foo { 
    background-color: #f00; 
} 

<body class="normal"> 
    <span class="foo">hello</span> 
    <span class="bar">hello</span> 
    <span class="baz">hello</span> 
</body>

Vous pouvez simplement utiliser javascript pour changer le nom de classe sur le corps de la normale à alterner, pour mettre en œuvre le changement de couleur sur .foo éléments. Plus de règles définiront les couleurs pour bar et baz.

document.getElementsByTagName('body')[0].className = 'alternate';

Source

2010-02-21 15:10:53

Vous pouvez donner au corps de votre document une classe pour déterminer la configuration des couleurs à utiliser, puis les styliser en conséquence.

par exemple:

.configTypeOne span.foo{...} 
.configTypeTwo span.foo{...}

Si vous modifiez alors les styles sur la même page après une certaine période de temps, un petit morceau de JS pour changer la classe du corps sera tout ce qu'il faut.

Source

2010-02-21 15:08:21

Modifier ou échanger le CSS de plusieurs éléments HTML à la fois

Répondre

Questions connexes