JS kann Styleangeben nicht lesen? *teilw. gelöst

[Orlok]

Hallo

Wenn also getComputedStyle(eineVariable) ist, dann verstehe ich das noch weniger, im Selfhtml Beispiel ist es ja auch der Elementenname(Button).

Wie dedlfix bereits sagte, erwartet die Methode getComputedStyle als erstes Argument eine Referenz auf ein Elementobjekt, und mit einer solchen wird die Methode in dem Beispiel auch aufgerufen.

<button onclick="GetBGColor(this)">Los!</button>

In dieser Zeile wird über das Attribut onclick ein Eventhandler für das Buttonelement registriert.

Dabei wird die Zeichenkette, die dem Attribut als Wert zugewiesen wurde, zum Körper einer anonymen Funktion geparst, welche dann beim Eintritt des Ereignisses automatisch aufgerufen wird.

Dies geschieht im Kontext des Elementes, für das der Eventhandler registriert wurde. Das bedeutet, die Kontextvariable this enthält nach dem Aufruf der Funktion eine Referenz auf das Buttonelement.

Mit dieser Referenz wird dann die zuvor im Scriptelement definierte Funktion GetBGColor aufgerufen, wobei der button genannte Parameter der Funktion mit der übergebenen Referenz initialisiert wird, sodass der Zeiger auf den Button innerhalb der Funktion als lokale Variable zur Verfügung steht.

Bei dem Aufruf window.getComputedStyle(button) wird also eine Referenz auf den Button übergeben.

Es sei allerdings erwähnt, dass es sich hier tatsächlich um kein gutes Beispiel handelt, denn diese Art der Ereignisbehandlung über Attribute im Markup ist ganz schlechter Stil.

Wesentlich besser wäre es, den Button innerhalb des Skripts zu referenzieren, beispielsweise mit der bereits genannten Methode getElementById, oder auch über die Methode querySelector.

Wenn man den Button dann referenziert hat, kann auf dem Objekt die Methode addEventListener aufgerufen werden, welche als erstes Argument den Namen des Ereignisses erwartet, und als zweites Argument eine Funktion, die beim Ereigniseintritt aufgerufen werden soll.

<button>Los!</button>

<script>

function getBackgroundColor (element) {
  return window.getComputedStyle(element).backgroundColor;
}

const button = document.querySelector('button');

button.addEventListener('click', function (event) {
  console.info(getBackgroundColor(button));
});

</script>

Hier definiere ich die Handlerfunktion direkt bei der Argumentübergabe. Die Ausgabe habe ich aus der Funktion zur Ermittlung der Hintergrundfarbe herausgenommen und in den Eventhandler verlegt. Statt die Methode alert zu verwenden, lasse ich das Ergebnis in der Konsole ausgeben.

Im Bezug auf das Beispiel wäre es allerdings besser, das Ergebnis als Elementinhalt direkt auf der Seite auszugeben, wobei das passende Element in diesem Fall output wäre.

const output = document.querySelector('output');

button.addEventListener('click', function (event) {
  output.value = getBackgroundColor(button);
});

Die bedingte Anweisung in dem Wikibeispiel mit der Eigenschaft currentStyle als Alternative kann übrigens ersatzlos gestrichen werden, ebenso wie die Übergabe des Leerstrings als zweites Argument an die Methode getComputedStyle. Das ist schon lange nicht mehr nötig.

Nötig wären allerdings Angaben zu Sprache und Viewport …

---

Ich habe das Beispiel überarbeitet. ;-)

Viele Grüße,

Orlok