Valeur retournée par document.getElementById Résolu

Question

Bonjour à toutes et tous,

j'utilise un bout de script pour faire clignoter un texte dont l'ID est 'blink' :

<script type="text/javascript">
function blink() {
  var toBl = document.getElementById('blink');
  if ( toBl.style.color == 'midnightblue' ) {
    toBl.style.color = 'red';
  } else {
    toBl.style.color = 'midnightblue';
  }
}
setInterval("blink()", 1000);
</script>

Comment connaitre la valeur retournée par :

 toBl.style.color

Ceci parce que ce script ne fonctionne que dans FF et IE. Opera est plus rebelle, ainsi que le WebKit.
Mon test d'égalité est foireux.
En faisant différents essais, j'en conclue que les différents navigateurs ne retournent pas la même valeur de couleur.
La preuve, Opera exécute le script correctement si je le modifie comme ceci :

function blink() {
  var toBl = document.getElementById('blink');
  if ( toBl.style.color == 'midnightblue' || toBl.style.color == '#191970' ) {
    toBl.style.color = 'red';
  }  else  {
    toBl.style.color = 'midnightblue';
  }
}

Note : la couleur midnightblue = #191970, Opera transforme donc en hexa...

Merci pour votre aide,
françois

Configuration: Mac OS X
Firefox 3.5.7

Alain_42 · Answer

a mon avis il vaut mieux utiliser le code hexa #xxxxxxx pour les couleurs plutôt que le nom que certains navigateurs n'interprètent pas correctement

fpradignac · Answer

Alain,

J'ai bien évidement testé différents codes couleurs, même en rgb(xx,yy,zz) et ceci :
function blink() {
  var toBl=document.getElementById('blink');
  if (toBl.style.color=='#191970') {
    toBl.style.color='crimson';
  } else {
    toBl.style.color='#191970';
  }
}
ne fonctionne qu'avec Opera et IE.

C'est pour cela que pouvoir récupérer la valeur "style.color" retournée par chaque navigateur éclairerait ma lanterne !

Merci,
françois

Alain_42 · Answer

toBl.style.color='crimson';

déja remplace ça par le code couleur hexa correspondant

et pour avoir le code retourné tu mets une petite boite de dialogue JS:



function blink() {
  var toBl=document.getElementById('blink');

alert("Code couleur retourne par navigateur: "+toBl.style.color);

  if (toBl.style.color=='#191970') {
    toBl.style.color='crimson';
  } else {
    toBl.style.color='#191970';
  }
}

fpradignac · Answer

Merci Alain,
ce n'est pas si simple : tous les moteurs de rendu savent interpréter les différents codes couleur hexa, littéral ou rgb, donc le passage de la couleur est bien appliqué par les moteurs; par contre ils ne renvoient pas la même valeur avec style.color : 
- IE (Trident) = rgb(25,25,122) sans espace
- Opera = en hexa
- Gecko+WebKit = rgb(25, 25, 122) avec espaces
maintenant je vais pouvoir traiter les retours de chaque moteur.

Merci beaucoup Alain pour ton aide !!!
François

fpradignac · Answer

Voici donc le code qui permet de faire clignoter un élément ayant un ID, et qui fonctionne avec tous les moteurs de rendu Gecko (Firefox & Co), WebKit (Safari, Chrome), Trident (IE) et les OS MacOSX, Linux, Windows™©® :

fpradignac · Answer

Je viens d'écrire un petit mémo qui reprend les réponses de tous les moteurs de rendu :
https://www.philographie.com?id=70&c=E-JavaScript

Valeur retournée par document.getElementById

6 réponses

Discussions similaires

Newsletters