Anzeige

[JS, CSS] Problem mit backgroundColor

[JS, CSS] Problem mit backgroundColor | PSD-Tutorials.de

Erstellt von Ausbrecher, 23.11.2012.

  1. Ausbrecher

    Ausbrecher Noch nicht viel geschrieben

    Dabei seit:
    28.03.2009
    Beiträge:
    17
    Geschlecht:
    männlich
    Kameratyp:
    EOS 400d
    [JS, CSS] Problem mit backgroundColor
    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 (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
    3. <html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6. <title>Test</title>
    7. <script language="javascript" type="text/javascript"><!--
    8. window.onload=function() {
    9.  document.getElementById("nochnTest").onclick=function() {
    10.   alert("1: "+(this.style.bgcolor?this.style.bgColor:"-NO style.bgColor-")+"\r\n"+
    11.      "2: "+(this.style.backgroundColor?this.style.backgroundColor:"-NO style.backgroundColor-")+"\r\n"+
    12.      "3: "+(this.currentStyle?this.currentStyle["backgroundColor"]:"-NO this.currentStyle[]-")+"\r\n"+
    13.      "4: "+(window.getComputedStyle?document.defaultView.getComputedStyle(this,null).getPropertyValue("backgroundColor"):"-NO getComputedStyle()-")+"\r\n"+
    14.      "5: "+this.style["background-color"]+"\r\n"+
    15.      "6: "+(this.style.getPropertyValue?this.style.getPropertyValue("background-color"):"-NO style.getPropertyValue()-")+"\r\n"+
    16.      "end");
    17.  };
    18. };
    19. --></script>
    20. <style type="text/css"><!--
    21. #nochnTest {
    22.  background-color:#DDD;
    23. }-->
    24. </style>
    25. </head>
    26. <body>
    27. <div id="nochnTest">KLICK MICH</div>
    28. </body>
    29. </html>
    30.  
    Und hier das gleiche online: http://www.blackpro.de/bg_test.html

    Hoffe jemand findet meinen Fehler.
     
    #1      
  2. jaderbass

    jaderbass Noch nicht viel geschrieben

    Dabei seit:
    14.01.2010
    Beiträge:
    45
    Geschlecht:
    männlich
    Ort:
    Erfurt
    Software:
    Adobe CC / Corel X4
    Kameratyp:
    Canon EOS 500D
    [JS, CSS] Problem mit backgroundColor
    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:
    1.  
    2. <div id="nochnTest" style="background-color:#DDD;">KLICK MICH</div>
    3.  
    Gruß
    Jörg
     
    #2      
  3. vincitore

    vincitore Aktives Mitglied

    Dabei seit:
    22.01.2005
    Beiträge:
    622
    Geschlecht:
    männlich
    Ort:
    Darmstadt
    Software:
    Adobe CC, Coda 2, Cinema 4D R13 Student
    Kameratyp:
    Canon EOS 5D Mark III
    [JS, CSS] Problem mit backgroundColor
    AW: [JS, CSS] Problem mit backgroundColor

    warum hast du denn im style tag <!-- --> willst du den Inhalt auskommentieren?
     
    #3      
  4. Ausbrecher

    Ausbrecher Noch nicht viel geschrieben

    Dabei seit:
    28.03.2009
    Beiträge:
    17
    Geschlecht:
    männlich
    Kameratyp:
    EOS 400d
    [JS, CSS] Problem mit backgroundColor
    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: 23.11.2012
    #4      
  5. Ausbrecher

    Ausbrecher Noch nicht viel geschrieben

    Dabei seit:
    28.03.2009
    Beiträge:
    17
    Geschlecht:
    männlich
    Kameratyp:
    EOS 400d
    [JS, CSS] Problem mit backgroundColor
    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 (Text):
    1. Element.prototype.getStyle=function(name){
    Code (Text):
    1.  
    2. [FONT=Courier New]       if(this.currentStyle)[/FONT]
    3. [FONT=Courier New]               return this.currentStyle[name];[/FONT]
    4. [FONT=Courier New]       else if(window.getComputedStyle)[/FONT]
    5. [FONT=Courier New]               return window.getComputedStyle(this,null)[name];[/FONT]
    6. [FONT=Courier New]}[/FONT]
    Danke für die Hilfe
     
    #5      
Seobility SEO Tool
x
×
×