Petit bug sur IE avec style.color

**zerros** · 13/11/2012, 17h52

Bonjour,

j'ai fait une petite fonction qui permet de changer des éléments de style d'un item sur ma page html. En gros, quand je sélectionne l'item, le change le fond, la couleur du texte et le fait qu'il soit en gras ou non. Mais pour réinitialiser à chaque fois que je change d'item, j'ai fait une boucle qui récupère la liste des éléments et qui les passe à "null". ca fonctionne impecc sur tous les navigateurs, sauf .... IE bien sûr ...

Voici ma fonction:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function show_faq(item)
{
elmts = document.getElementsByClassName("faq_item");
for(var i=0;i<elmts.length;i++)
{
elmts[i].style.display='none';
}
elmts2 = document.getElementsByClassName("faq_headline");
for(var i=0;i<elmts2.length;i++)
{
elmts2[i].style.color=null;
elmts2[i].style.backgroundColor=null;
elmts2[i].style.fontWeight=null;
}
document.getElementById(item).style.display="block";
var faq = "faq" + item;
document.getElementById(faq).style.backgroundColor="#064450";
document.getElementById(faq).style.color="#ffffff";
document.getElementById(faq).style.fontWeight="bold";
}

Et mon html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="mod_faqcust">
<div id="faq26" class="faq_headline" onclick="show_faq('26');"> item1 </div>
<div id="faq25" class="faq_headline" onclick="show_faq('25');" style="background-color: rgb(6, 68, 80); color: rgb(255, 255, 255); font-weight: bold;"> item2 actuellement sélectionné </div>
<div id="faq21" class="faq_headline" onclick="show_faq('21');"> item3 </div>
<div id="faq19" class="faq_headline" onclick="show_faq('19');"> item4 </div>
<div id="faq17" class="faq_headline" onclick="show_faq('17');"> item5 </div>
<div class="faq_text">
...
...

Auriez-vous une idée svp ?

**DrDarko** · 13/11/2012, 18h13

getElementsByClassName n'est pas supportée sur IE c'est pour ça que le style de tes éléments n'est pas mis à jour... (sacré IE).

Pour y remédier tu peux passer par du jQuery ou en sélectionnant tes éléments d'une autre manière qu'avec la méthode getElementsByClassName.

**Bovino** · 13/11/2012, 21h11

En l’occurrence, on ne peut pas particulièrement blâmer IE de n'avoir pas implémenté getElementsByClassName() avant que cette méthode n'ai été introduite par EcmaScript 5...
Aucun navigateur ne l'a fait et IE9 supporte parfaitement cette méthode.

**andry.aime** · 14/11/2012, 06h39

Bonjour,

Il y a aussi le script de SpaceFrog.

A+.

**zerros** · 14/11/2012, 09h44

Merci pour les réponses

Je suis sur IE9 et je confirme que ça ne fonctionne pas sur ce navigateur.

Je vais aller voir le script de SpaceFrog. merci

**Bovino** · 14/11/2012, 09h54

Je suis sur IE9 et je confirme que ça ne fonctionne pas sur ce navigateur.

Ben moi je te confirme que c'est toi qui ne sait pas l'utiliser !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>getElementsByClassName</title>
</head>
<body>
	<div class="foo"></div>
	<div class="foo"></div>
	<div class="foo"></div>
	<div class="foo"></div>
	<script>
                alert(document.getElementsByClassName('foo').length);
        </script>
</body>
</html>

fonctionne parfaitement !
Nom : className.png
Affichages : 36
Taille : 53,4 Ko

**zerros** · 14/11/2012, 10h00

exact, il récupère bien les éléments. En fait ce n'est pas le getElementsByClassname qui pose problème mais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
elmts2[i].style.color=null;
elmts2[i].style.backgroundColor=null;
elmts2[i].style.fontWeight=null;

qui ne sont pas reconnus par IE. Comment puis-je remettre le style par défaut sur IE ? Finalement, c'est bien ça le problème.

**zerros** · 14/11/2012, 10h02

et je viens de trouver. IE n'aime pas null. Du coup j'initialise à "" pour remettre le style par défaut.

Merci à tous pour votre aiiiidddeeee :d

**Bovino** · 14/11/2012, 10h03

Que ce soit pour IE ou pour les autres navigateurs, remettre le style par défaut se fait en affectant une chaine vide à la propriété :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
elmts2[i].style.color='';
elmts2[i].style.backgroundColor='';
elmts2[i].style.fontWeight='';

**zerros** · 14/11/2012, 10h06

Yessss. J'ai vu

Merccciii . tip top, ça marche au poil

Petit bug sur IE avec style.color

JavaScript

Discussions similaires

Partager

Partager