Patrick B.: Problem mit this.style.backgroundColor

Beitrag lesen

SELF-Forum

Problem mit this.style.backgroundColor

Patrick B.
– Informationen zu den Bewertungsregeln

Hallo zusammen,
hatte mich bereits in einem anderem Forum zu dem Thema gemeldet, aber leider konnte mir dort niemand weiter helfen und da es eilt, dachte ich mir, frag ich hier nach, ob mir jemand weiterhelfen kann.

Folgendes Script funktioniert nicht in FireFox und Chrome (im IE und in Opera geht es, Safari ist ungetestet)
--- CSS ---------------

#nochnTest {  
 background-color:#DDD;  
}

--- JavaScript --------

window.onload=function() {  
 document.getElementById("nochnTest").onclick=function() {  
  alert("1: "+(this.style.bgcolor?this.style.bgColor:"-NO style.bgColor-")+"\r\n"+  
     "2: "+(this.style.backgroundColor?this.style.backgroundColor:"-NO style.backgroundColor-")+"\r\n"+  
     "3: "+(this.currentStyle?this.currentStyle["backgroundColor"]:"-NO this.currentStyle[]-")+"\r\n"+  
     "4: "+(window.getComputedStyle?document.defaultView.getComputedStyle(this,null).getPropertyValue("backgroundColor"):"-NO getComputedStyle()-")+"\r\n"+  
     "5: "+this.style["background-color"]+"\r\n"+  
     "6: "+(this.style.getPropertyValue?this.style.getPropertyValue("background-color"):"-NO style.getPropertyValue()-")+"\r\n"+  
     "end");  
 };  
};

--- HTML ----------
<div id="nochnTest">KLICK MICH</div>
_______________________

Getestet werden hier verschiedene Methoden die Hintergrundfarbe des DIVs auszulesen. Im Opera und im IE funktioniert dies auch, allerdings machen Chrome und FireFox Probleme und geben "" zurück.

Ich arbeite zur Zeit an einem Stand-Alone Animationsframework. Gebe ich dem DIV via Style-Attribut die Hintergrundfarbe klappt es. Dies kann ich aber nicht voraussetzen das die User das in Zukunft auch so machen. Daher muss es auch via Style-Tag gehen.

Hier ein Link zum Online-Live-testen: [url]http://www.blackpro.de/bg_test.html[/url]

und hier der vollständige Dokument-Quelltext:
________________________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Test</title>  
<script language="javascript" type="text/javascript"><!--  
window.onload=function() {  
	document.getElementById("nochnTest").onclick=function() {  
		alert("1: "+(this.style.bgcolor?this.style.bgColor:"-NO style.bgColor-")+"\r\n"+  
			  "2: "+(this.style.backgroundColor?this.style.backgroundColor:"-NO style.backgroundColor-")+"\r\n"+  
			  "3: "+(this.currentStyle?this.currentStyle["backgroundColor"]:"-NO this.currentStyle[]-")+"\r\n"+  
			  "4: "+(window.getComputedStyle?document.defaultView.getComputedStyle(this,null).getPropertyValue("backgroundColor"):"-NO getComputedStyle()-")+"\r\n"+  
			  "5: "+this.style["background-color"]+"\r\n"+  
			  "6: "+(this.style.getPropertyValue?this.style.getPropertyValue("background-color"):"-NO style.getPropertyValue()-")+"\r\n"+  
			  "end");  
	};  
};  
--></script>  
<style type="text/css"><!--  
#nochnTest {  
	background-color:#DDD;  
}-->  
</style>  
</head>  
<body>  
<div id="nochnTest">KLICK MICH</div>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln