Patrick B.: Problem mit this.style.backgroundColor

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

  1. Problem mit this.style.backgroundColor

    1UnitedPower Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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.

    Bei Crosspostings gehört es zum guten Ton die andere Quelle zumindest zu verlinken. Noch besser wäre es, wenn du eine Zusammenfassung der bisherigen Erkenntnisse aus dem anderen Thread posten würdest.

    Im Übrigen funktioniert der gezeigte Code bei mir.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem mit this.style.backgroundColor

      Patrick B.
      – Informationen zu den Bewertungsregeln

      Hier der Thread des anderen Forums: PSD-Tutorials
      Es gab die Erkenntnis, dass das Style-Attribut funktioniert. Leider hilft mir das nicht viel weiter da ich keine Vorraussetzungen stellen möchte.

      Benutzte FireFox 13.0 so wie auch meine Kollegen.

      E müsste eine Alert-Box aufgehen und mindestens eine der 6 Zeilen müsste den Farbcode: #DDD beinhalten.
      Leider kommt immer die Meldung:
      1: -NO style.bgColor-
      2: -NO style.backgroundColor-
      3: -NO this.currentStyle[]-
      4:
      5: undefined
      6:
      End

      Punkt 1 ist klar. style.bgColor gibt es nicht, habe das nur eingesetzt um eventualitäten auszuschließen.
      Punkt 2 wiederum ist nicht klar, style.backgroundColor sollte es geben.
      Punkt 3 ist wieder klar, currentStyle ist eine Eigenschaft für IE
      Punkt 4 ist der computedStyle, diese Funktion müsste es im FF geben, tut es auch, nur wird ein leeres Resultat zurück gebracht.
      Punkt 5 ist wieder nur für Eventualitäten.
      Punkt 6 müsste wiederrum gehen. Aber auch hier wird ein leeres Resultat zurück gegeben.
      Dies sind die Resultate die meine Kollegen bzw ich bekommen. Keines davon ist der Farbcode, der im Style angegeben wurde.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Problem mit this.style.backgroundColor

        ChrisB
        – Informationen zu den Bewertungsregeln

        Hi,

        Punkt 4 ist der computedStyle, diese Funktion müsste es im FF geben, tut es auch, nur wird ein leeres Resultat zurück gebracht.

        Da fragst du ja auch eine nicht existente CSS-Eigenschaft ab. Sobald du deren Namen *korrekt* notierst, sollte es funktionieren.

        (Und btw., die Beschreibung von getComputedStyle in der MDC sagt, dass document.defaultView zu nutzen idR. unsinnig ist, und genauso gut gleich window.getComputedStyle verwendet werden kann).

        Punkt 5 ist wieder nur für Eventualitäten.

        Scheint mir insgesamt ziemliches Gebastel zu sein. getComputedStyle plus ein Ersatz für IE sollte doch eigetlich ausreichen?

        Keines davon ist der Farbcode, der im Style angegeben wurde.

        Das darfst du allerdings auch nach der Anpassung bei Punkt 4 nicht erwarten – Zitat aus obigem Dokument,

        “The returned object actually represents the CSS 2.1 used values, not the computed values.”

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Problem mit this.style.backgroundColor

          Patrick B.
          – Informationen zu den Bewertungsregeln

          Da fragst du ja auch eine nicht existente CSS-Eigenschaft ab. Sobald du deren Namen *korrekt* notierst, sollte es funktionieren.

          Oh Danke! Da war ein kleiner Rechtschreibfehler. Allerdings liegt es nicht nur daran. Im Original-Script war der nicht.
          window.getComputedStyle(this,null)["backgroundColor"]

          Habe das was du gesagt hast mal umgesetzt und siehe da, es klappt!
          Hatte das ursprünglich aus dem protoType Framework genommen, mit dem defaultView und getPropertyValue. Ohne die beiden geht es doch gleich viel besser :) Danke!

          Daraus ergibt sich dann folgendes Script:

            
Element.prototype.getStyle=function(name){  
	if(this.currentStyle)  
		val= this.currentStyle[name];  
	else if(window.getComputedStyle)  
		val=window.getComputedStyle(this,null)[name];  
}  

~~~ das müsste nun in allen Browsern klappen
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln