Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „[JS, CSS] Problem mit backgroundColor“

G

Gelöschtes Mitglied 290216

Guest

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

Noch nicht viel geschrieben

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

Aktives Mitglied

AW: [JS, CSS] Problem mit backgroundColor

warum hast du denn im style tag <!-- --> willst du den Inhalt auskommentieren?
 
G

Gelöschtes Mitglied 290216

Guest

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 <!-- und --> 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 :)
 
Zuletzt bearbeitet von einem Moderator:
G

Gelöschtes Mitglied 290216

Guest

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben