mit javascript per DOM color abfragen

[wonk]

Hallo,

ist es möglich per DOM die Farbe eines Elements abzufragen, z.B. alert(document.getElementById("Tabellenname>").rows[i].cells[0].firstChild.style.color) ?

Gruss, wonk

[Rolf B]

Hallo wonk,

wenn das auf diese Weise identifizierte firstChild-Element ein style-Attribut hat, in dem die color-Eigenschaft gesetzt wird, dann ja.

Aber das wird in den meisten Fällen nicht der Fall sein. Wenn die Farbe per Stylesheet bestimmt wird, oder sich einfach dorthin vererbt, musst Du zuerst die gesammelten Werke aller gültigen Styles integrieren. Die dafür erforderliche Raketenwissenschaft bringt das window Objekt glücklicherweise schon mit.

let aktuellerStyle = window.getComputedStyle(
   document.getElementById("Tabellenname").rows[i].cells[0].firstChild
);
alert(aktuellerStyle.color);

Rolf

[wonk]

Hallo,

das klappt und liefert die Farbe z.B. in der Form rgb(0,0,0). Ich will aber die Farbe vergleichen z.B. in der Form

if (aktuellerStyle.color == rgb(0,0,0) { ...

So funktioniert das aber nicht. Muss ich da zum Vergleich erst ein passendes Style oder Color-Objekt erzeugen?

Gruss, wonk

[Rolf B]

Hallo wonk,

So funktioniert das aber nicht.

Ach sorry, ich muss den Selfer raushängen lassen.

„Funktioniert nicht“ funktioniert nicht als Problembeschreibung.

Was hast Du getan, um dem Fehler auf die Spur zu kommen? Welche Debugging-Schritte hast Du unternommen?

Was erscheint in der Konsole der Entwicklerwerkzeuge, wenn Du dein Script ausführst?
Was genau steht in aktuellerStyle.color drin?
Was ist dieses rgb(0,0,0), das Du darin findest? Eine Zahl? Ein Objekt? Was anderes?
Was ist dieses rgb(0,0,0), das in deinem IF steht? Eine Zahl? Eine Zeichenkette? Was anderes?

Warum stelle ich Fragen, statt zu sagen: „Muttu so und so machen, dann fluppt dat“? Weil Abschreiben und Zusammenkopieren von Fertigcode keinen Lerneffekt hat.

Rolf

[wonk]

Hallo,

ich will es ja eigentlich auch verstehen, bin aber kein javascipt-Fachmann, insbesondere nicht im DOM-Bereich.

Ich habe es jetzt aber herausbekommen. "rgb(0, 0, 0)" (für Farbe schwarz) ist vom Typ String. Die Abfrage muss also lauten:

if (aktuellerStyle.color == "rgb(0, 0, 0)" { ...

Allerdings hatte ich zunächst übersehen, dass hinter den Kommata in der Farbbezeichnung jeweils ein Leerzeichen ist, was für einen Stringvergleich natürlich wesentlich ist.

Gruss, wonk

[Rolf B]

Hallo wonk,

sehr gut 😀

Ich habe keine Ahnung, ob die Schreibweise dieses Ergebnisses in allen Browsern gleich ist. In Chrome, Firefox und Internet Explorer ist es gleich, aber es gibt ja noch eine Menge mehr.

Beachte auch, dass Du nicht rgb(r, g, b), sondern rgba(r, g, b, a) zurückbekommst, wenn die Farbe Transparenz enthält.

Bei Stackoverflow hat jemand nachgefragt, ob denn eine Rückgabe als CSS Funktion rbg oder rgba irgendwo als Spezifizikation festgeschrieben sei. Antwort war: Im Prinzip schon (mit Links auf die konkrete Spec), aber die CSS Color 4 Spec definiert neue Arten, Farben anzugeben und da mag es anders werden. Aber das ist was für die Zukunft und vor allem dürfte das nur passieren, wenn Du die Neuerungen auch bei Dir anwendest.

Rolf