Bernd: Problem mit Attribut-Zugriff

Hallo Leute,
ich habe da ein kleines Problem:
Ich habe mit einer Funktion ein <div>-Element erzeugt und diesem div-Element folgende Funktion zugewiesen:
  divEle.addEventListener('click', function(){alert(this.style.getAttribute('background-color'));}, false);
Desweiteren habe ich einen Button, mit dem ich das Attribut 'background-color' (des Div-Elements) ändern kann - mit:
  Btn.addEventListener('click', function(){document.getElementById('divEle').style.setAttribute('background-color', 'green', false);});

So, zu dem was jetzt passiert:
Klick auf das Div-Element  -->  null;

Klick auf den Button  -->  Div-Element-Hintergrund = grün;
  Dann: Klick auf das Div-Element  -->  grün;

Soweit so gut.. nun habe ich aber einen 2. Button. Mit dem möchte ich nun den Wert von dem background-Color Attribute des Div-Elements abfragen:
  Btn2.addEventListener('click', function(){alert(document.getElementById('divEle').style.getAttribute('background-color'));}, false);

Nun:
Klick auf den Färbe-Button  -->  Div-Element-Hintergrund = grün;
  Dann: Klick auf das Div-Element  -->  grün;
  Dann: Klick auf den 2. Button  -->  null;

Ich habe mehrmals 'nen Rechtschreibfehler im Code gesucht aber m.E. ist da nix..
Wär toll wenn mir hierbei jemand helfen könnte..

  • Wo ist der Fehler
  • bzw. warum ist was falsch / wie kommt es zu der Ausgabe 'null' beim 2. Button
  • ggf. Lösungsvorschlag

Liebe Grüße,
  Bernd

  1. @@Bernd:

    nuqneH

    @@Bernd:

    nuqneH

    Wär toll wenn mir hierbei jemand helfen könnte..

    Die Fehlerkonsole deines Browsers kann.

    • Wo ist der Fehler

    TypeError: this.style.getAttribute is not a function
    TypeError: document.getElementById(...).style.setAttribute is not a function

    Anders gesagt: Das style-Objekt hat keine Methode getAttribute() und setAttribute()

    • bzw. warum ist was falsch

    CSS-Eigenschaften sind keine Attribute. Die werden http://de.selfhtml.org/javascript/objekte/style.htm@title=anders gesetzt/ausgelesen.

    Das sollte man allerdings nicht tun. Wenn .style im JavaScript auftaucht, macht man etwas falsch.²

    • ggf. Lösungsvorschlag

    Mit JavaScript Elementattribute im DOM ändern (z.B. Klassenzugehörigkeiten). Die Stile für die jeweiligen Zustände stehen statisch im Stylesheet.

    Qapla'

    ¹ sollte das in IrgendEinem Browser anders sein, ist es kein Standard

    ² ausgenommen diejenigen, die *genau* wissen, was sie tun

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Die Fehlerkonsole deines Browsers kann.

      Da bräuchte ich eine kleine 'Einführung'... Ich arbeite in der Regel mit dem Internet Explorer. Meinst du das  F12 Entwichlertools  vom Internet Explorer oder was?

      TypeError: this.style.getAttribute is not a function
      TypeError: document.getElementById(...).style.setAttribute is not a function

      Anders gesagt: Das style-Objekt hat keine Methode getAttribute() und setAttribute().

      Ähhh... wenn ich deinen Link mal zitieren dürfte (http://de.selfhtml.org/javascript/objekte/style.htm@title=hier):
        var fontsize = document.all.Absatz.style.getAttribute("fontSize", false);
        document.all.Absatz.style.setAttribute("border", "thin solid red", false);
      Die Beispiele scheinen ja doch über das style-Objekt zu gehen, oder?

      Dennoch denke ich, dass ich jetzt doch mal getAttribute() und setAttribute() abschaffen sollte...

      Das sollte man allerdings nicht tun.

      Interessanter Punkt.. es stimmt zwar, doch da ist die Verlockung das kurz und fix mit Javascript zu erledigen schon groß. Ich werde mal damit herumexperimentieren

      Liebe Grüße,
        Bernd

      1. Mahlzeit,

        Die Beispiele scheinen ja doch über das style-Objekt zu gehen, oder?

        Das Beispiel sagt IE ab Version 4. Daher ist davon auszugehen, das existiert nicht mehr, wenn es nicht mehr funktioniert. Also solltest du nachsehen, ob es diese Methoden noch gibt.

        Dennoch denke ich, dass ich jetzt doch mal getAttribute() und setAttribute() abschaffen sollte...

        macht Sinn.

        BTW: Der IE ist zum Entwickeln die denkbar ungünstigste Lösung. Der ist IMO viel zu fehlertolerant.
        Wie gut die Entwicklertools sind, kann ich aber nicht sagen. Die vom FF und Chrome sind etwa gleichwertig, was ich so gesehen hab.

        --
        42
      2. @@Bernd:

        nuqneH

        Die Fehlerkonsole deines Browsers kann.
        Da bräuchte ich eine kleine 'Einführung'... Ich arbeite in der Regel mit dem Internet Explorer. Meinst du das  F12 Entwichlertools  vom Internet Explorer oder was?

        Ja.

        Ähhh... wenn ich deinen Link mal zitieren dürfte (http://de.selfhtml.org/javascript/objekte/style.htm@title=hier): […]
        Die Beispiele scheinen ja doch über das style-Objekt zu gehen, oder?

        Du hast die Grafiken übersehen. Man hätte sie blinken lassen sollen.

        Interessanter Punkt.. es stimmt zwar, doch da ist die Verlockung das kurz und fix mit Javascript zu erledigen schon groß.

        Das rächt sich früher oder später. Eher früher.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Die Fehlerkonsole deines Browsers kann.
          Da bräuchte ich eine kleine 'Einführung'... Ich arbeite in der Regel mit dem Internet Explorer. Meinst du das  F12 Entwichlertools  vom Internet Explorer oder was?

          Ja.

          Nun, ich weiß nicht ob man da zusätzlich noch etwas anklicken muss aber wenn ich da Links in der Leiste auf 'Konsole' gehe dann steht da eigentlich immer oben Links: 0 Fehler 0 Warnungen 0 Meldungen

          Liebe Grüße,
            Bernd