[JS, CSS] Problem mit backgroundColor

Gelöschtes Mitglied 290216 · 23.11.2012

Hallo zusammen,
habe ein kleines Problem an dem ich langsam aber sicher verzweifel. Ansich sind das Grundlagen, aber es will irgendwie im FireFox und Chrome nicht. Im IE8 und Opera geht es, Safari ist ungetestet.
Es handelt sich um die funktion:
document.getElementById("abc").onclick=function() {
// hier steht code um von this.style die Hintergrundfarbe auszulesen
};
Bei anderen Styles die ich getestet habe, funktioniert es, nur bei this.style.backgroundColor streiken FF und Chrome

Hier ein vollständiger Codeausschnitt mit verschiedenen Varianten zum testen im Firefox und Chrome - Keine der Varianten gibt eine Farbe bei mir zurück:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<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>

Und hier das gleiche online:

Hoffe jemand findet meinen Fehler.

jaderbass · 23.11.2012

AW: [JS, CSS] Problem mit backgroundColor

Hallo,

wenn Du die style-Definition in das HTML-Tag legst funktionierts auch im FF. z.B: so:

HTML:

<div id="nochnTest" style="background-color:#DDD;">KLICK MICH</div>

Gruß
Jörg

vincitore · 23.11.2012

AW: [JS, CSS] Problem mit backgroundColor

warum hast du denn im style tag  willst du den Inhalt auskommentieren?

Gelöschtes Mitglied 290216 · 23.11.2012

AW: [JS, CSS] Problem mit backgroundColor

@vincitore:
Das macht man in der Regel so. Es gibt ja nicht nur Safari, Opera, FireFox, Chrome und IE, gibt ja noch andere Browser. Script und Stylesheets werden mit HTML Commentarzeichen auskommentiert, damit speziell ältere Browser dies nicht ausgeben. Gab da einige Browser die selbst Header-Daten ausgegeben haben. So hat es sich eingebürgert das man diese mit HTML Kommentarzeichen auskommentiert. Viele benutzen auch das <![CDATA[ ]!> , bringt allerdings nichts da genau diese älteren Browser dies nicht beachten.
Innerhalb CSS und Script Tags wird  ignoriert da hier /* */ bzw bei JS auch // als kommentare zählen.

Heutzutage gehört es einfach nur zum gutem Stil am Anfang und Ende von Style und Script Tags die  zu setzen, sind aber nicht mehr wirklich notwendig.

@jaderbass:
Leider kann ich davon nicht ausgehen das dies in Zukunft so gemacht wird. Ich arbeite an einem Stand-Alone Animationsframework. Da ich auch in einem größerem Unternehmen arbeite das 7 Webseiten pflegt und erneuert und das auch wenn ich nicht mehr in dem Unternehmen beschäftigt sein werden sollte, müsste es auch mit der Style-Tag Deklaration funktionieren und auch "dumme" sollten damit klar kommen

Gelöschtes Mitglied 290216 · 23.11.2012

AW: [JS, CSS] Problem mit backgroundColor

Hatte es einwenig Eilig, weshalb ich mich zusätzlich noch beim SelfHTML Forum meldete. http://forum.de.selfhtml.org/?t=211825&m=1446015

Danke ChrisB für Lösung.
Zum einem hat sich ein kleiner definitionsfehler eingeschlichen (background-color statt backgroundColor) zum anderem hat defaultView und getPropertyValue nicht 'gescheit' funktioniert.

Hier die Lösung:

Code:

Element.prototype.getStyle=function(name){

Code:

[FONT=Courier New]       if(this.currentStyle)[/FONT]
[FONT=Courier New]               return this.currentStyle[name];[/FONT]
[FONT=Courier New]       else if(window.getComputedStyle)[/FONT]
[FONT=Courier New]               return window.getComputedStyle(this,null)[name];[/FONT]
[FONT=Courier New]}[/FONT]

Danke für die Hilfe