Hintergrundfarbe: blinkt.net

[Karl-Heinz Osmer]

Hallöle,

ich möchte ein <div> 5 sec blinken lassen, also die Hintergrundfarbe hin- und herschalten. Das klappt allerdings nur _einmal_

Es wird auf ROT umgeschaltet, aber nicht wieder auf GELB. Warum?

var aktiv_interval = 0;
var aktiv_timeout  = 0;
function initBlink( id ) {
  if ( aktiv_timeout  ) window.clearTimeout (aktiv_timeout);
  if ( aktiv_interval ) window.clearInterval(aktiv_interval);
  aktiv_interval = window.setInterval("blink('"+id+"')",500);
  aktiv_timeout  = window.setTimeout("stopBlink()",5000);
}
function blink( id ) {
  alert ( window.document.getElementById( id ).style.backgroundColor );
  if ( window.document.getElementById( id ).style.backgroundColor == 'rgb(255,0,0)' ) {
    window.document.getElementById( id ).style.backgroundColor = 'rgb(255,255,0)';
  } else {
    window.document.getElementById( id ).style.backgroundColor = 'rgb(255,0,0)';
  }
}
function stopBlink() {
  if ( aktiv_timeout  ) window.clearTimeout (aktiv_timeout);
  if ( aktiv_interval ) window.clearInterval(aktiv_interval);
}

[Karl-Heinz Osmer]

Nachtrag:

trotz CSS
background-color: #ff0;

kennt ...style.backgroundColor KEINE Farbe

beim Firefox klappt es, wenn ich mit Leerzeichen abfrage:

if ( window.document.getElementById( id ).style.backgroundColor == 'rgb(255, 0, 0)' ) {

der IE möchte es aber ohne Leerzeichen haben:
if ( window.document.getElementById( id ).style.backgroundColor == 'rgb(255,0,0)' ) {

Warum funzt '#f00' oder '#ff0000' nicht?

LG Kalle

[Gernot Back]

Hallo Karl,

trotz CSS
background-color: #ff0;

Hast du das denn als Inline-Style zugewiesen oder nur indirekt über eine Klasse oder einen Elementselektor. In letzteren beiden Fällen musst du dich nicht wundern, wenn deine Style-Abfrage kein Ergebnis liefert.

Gruß Gernot

[wahsaga]

hi,

Es wird auf ROT umgeschaltet, aber nicht wieder auf GELB. Warum?

weil dir nicht jeder browser einen mit javascript gesetzten css-wert genau so wieder zurückliefert, wie du ihn gesetzt hast.

das trifft insbesondere bei farbangaben zu, zu deren notation es ja diverse schreibweisen gibt: #abc, #aabbcc, deine rgb(...)-methode, farbnahmen.
da geben die browser oftmals eine notation wieder, die ihnen "am liebsten" ist - und nicht die, die du erwartest.

element.style.backgroundColor == 'rgb(255,0,0)';

lass dir mal nach so einer farbzuweisung den wert von backgroundColor wieder mit alert ausgeben, in den verschiedenen browsern - dann dürftest du sehen, was ich meinen

in diesem falle wäre es also sicher einfacher, nicht den zuvor gesetzen farbwert wieder abfragen zu wollen, sondern sich in einer zusätzlichen variable ein flag zu setzen, welches dann beim entscheiden hilft, welcher "zustand" als nächstes wieder dran wäre.

gruß,
wahsaga