✔ CSS mit JS ändern, im Opera mit Problemen

[erik s.]

Servus,

ich hab folgendes Problem: ich bastle gerade ein Wettbüro für meine Seite und wollte, dass der Tipp, den man gemacht hat, optisch sofort erkennbar wird. Habe mir so gedacht "Ach, lässt einfach die Rahmenfarbe der betroffenen Tabellenzelle mit Javascript ändern". Ja, im IE geht das alles wunderbar, nur im Opera hab ich das Problem, dass die Rahmenfarbe erst geändert wird, wenn man die von der Änderung betroffene Zelle mit dem Cursor berührt/verlässt bzw. diese aufgrund des hinzugefügten Nodes die Größe ändert.
Meine script.js:

function bg_color(el, color)
{
	el.style.background = color;
}
var betted = new Array();
var nodes  = new Array();
var results = new Array();
function react_on_bet(el, id, result)
{
	if(!betted[id])
	{
		el.style.border = "1px solid #FF0000";
		betted[id] 	= true;
		results[id] = result;
		nodes[id] 	= document.createTextNode("getippt");
		el.appendChild(nodes[id]);
		document.getElementById("match["+id+"]").setAttribute("value", result, 1);
	}
	else
	{
		var td = document.getElementById("match_"+id+"_ratio_"+results[id]);
		if(td.removeChild(nodes[id]))
		{
			td.style.border = "1px solid #FFFFFF";
			betted[id] = false;
		}
		if(result != results[id])
		{
			react_on_bet(el, id, result);
		}
		else
		{
		document.getElementById("match["+id+"]").setAttribute("value", "", 1);
		}
	}
}

Und meine betroffene HTML-Datei:

...
<script src="script.js" language="JavaScript" type="text/javascript"></script>
...
	  <table width="540" border="0" cellpadding="5" cellspacing="0" align="center">
  	    
  	    <tr>
  	      <td colspan="3" align="left" valign="top">
  	        heute, 20:00 Uhr
  	        <input type="hidden" name="match[1]" value="" />
  	      </td>
  	    </tr>
  	    <tr>
  	      <td id="match_1_ratio_1" width="44%" align="right" valign="top"
  	      style="border: 1px solid #FFFFFF;"
  	      onclick="javascript:react_on_bet(this, '1', '1');"
  	      onmouseover="javascript:bg_color(this, '#F1F1FA');"
  	      onmouseout="javascript:bg_color(this, '#FFFFFF');"
  	      >
  	        <b>Bayern M&uuml;nchen</b>
  	        &nbsp;
  	        1.1x
  	      </td>
  	      <td id="match_1_ratio_0" width="12%" align="center" valign="top"
  	      style="border: 1px solid #FFFFFF;"
  	      onclick="javascript:react_on_bet(this, '1', '0');"
  	      onmouseover="javascript:bg_color(this, '#F1F1FA');"
  	      onmouseout="javascript:bg_color(this, '#FFFFFF');"
  	      >
  	        4.5x
  	      </td>
  	      <td id="match_1_ratio_2" width="44%" align="left" valign="top"
  	      style="border: 1px solid #FFFFFF;"
  	      onclick="javascript:react_on_bet(this, '1', '2');"
  	      onmouseover="javascript:bg_color(this, '#F1F1FA');"
  	      onmouseout="javascript:bg_color(this, '#FFFFFF');"
  	      >
  	        9x
  	        &nbsp;
  	        <b>Carl Zeiss Jena</b>
  	      </td>
  	    </tr>
           </table>

Das kuriose ist: sobald ich die onmouseover/-out Ereignisse ganz herausnehme, siehts mit einer farblichen Rahmenänderung noch schlechter aus. Die ändert sich bei mir erst, wenn sich die Zelle wieder größenmäßig ändert oder ich zu einem anderen Task switche und dann wieder zum Opera.

Wäre sehr glücklich, wenn mir jemand helfen könnte. Danke

erik

 

[erik s.]

Habs selbst hinbekommen.

Hab einfach neben dieser Anweisung

el.style.border = "1px solid #FF0000";

noch dieses mit eingefügt:

el.setAttribute("style", "border: 1px solid #FF0000;", 1);

Bisher klappt es damit wunderbar im IE und auch im Opera.

erik

 

[Maik]

Mit einem Klick auf den "Status"-Button lässt sich das Thema als erledigt markieren.