nicht angemeldet
Problem mit this.style.backgroundColor
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>
-
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.
-
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:
EndPunkt 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.-
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?-
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
-
-
-