tag:forum.selfhtml.org,2005:/self mit javascript per DOM color abfragen – SELFHTML-Forum 2021-07-05T09:23:55Z https://forum.selfhtml.org/self/2021/jul/03/mit-javascript-per-dom-color-abfragen/1789893?srt=yes#m1789893 wonk 2021-07-03T20:02:52Z 2021-07-03T20:02:52Z mit javascript per DOM color abfragen <p>Hallo,</p> <p>ist es möglich per DOM die Farbe eines Elements abzufragen, z.B. alert(document.getElementById("Tabellenname>").rows[i].cells[0].firstChild.style.color) ?</p> <p>Gruss, wonk</p> https://forum.selfhtml.org/self/2021/jul/03/mit-javascript-per-dom-color-abfragen/1789894?srt=yes#m1789894 Rolf B 2021-07-03T20:12:32Z 2021-07-03T20:12:32Z mit javascript per DOM color abfragen <p>Hallo wonk,</p> <p>wenn das auf diese Weise identifizierte firstChild-Element ein style-Attribut hat, in dem die color-Eigenschaft gesetzt wird, dann ja.</p> <p>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.</p> <pre><code class="block language-js"><span class="token keyword">let</span> aktuellerStyle <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getComputedStyle</span><span class="token punctuation">(</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"Tabellenname"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>rows<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>cells<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>firstChild <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">alert</span><span class="token punctuation">(</span>aktuellerStyle<span class="token punctuation">.</span>color<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/jul/03/mit-javascript-per-dom-color-abfragen/1789931?srt=yes#m1789931 wonk 2021-07-04T19:43:17Z 2021-07-04T20:39:36Z mit javascript per DOM color abfragen <p>Hallo,</p> <p>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</p> <pre><code class="block">if (aktuellerStyle.color == rgb(0,0,0) { ... </code></pre> <p>So funktioniert das aber nicht. Muss ich da zum Vergleich erst ein passendes Style oder Color-Objekt erzeugen?</p> <p>Gruss, wonk</p> https://forum.selfhtml.org/self/2021/jul/03/mit-javascript-per-dom-color-abfragen/1789932?srt=yes#m1789932 Rolf B 2021-07-04T20:46:37Z 2021-07-04T20:48:01Z mit javascript per DOM color abfragen <p>Hallo wonk,</p> <blockquote> <p>So funktioniert das aber nicht.</p> </blockquote> <p>Ach sorry, ich muss den Selfer raushängen lassen.</p> <p>„Funktioniert nicht“ funktioniert nicht als Problembeschreibung.</p> <p>Was hast Du getan, um dem Fehler auf die Spur zu kommen? Welche Debugging-Schritte hast Du unternommen?</p> <p>Was erscheint in der Konsole der Entwicklerwerkzeuge, wenn Du dein Script ausführst?<br> Was <strong>genau</strong> steht in <code>aktuellerStyle.color</code> drin?<br> Was ist dieses rgb(0,0,0), das Du darin findest? Eine Zahl? Ein Objekt? Was anderes?<br> Was ist dieses rgb(0,0,0), das in deinem IF steht? Eine Zahl? Eine Zeichenkette? Was anderes?</p> <p>Warum stelle ich Fragen, statt zu sagen: „Muttu so und so machen, dann fluppt dat“? Weil Abschreiben und Zusammenkopieren von Fertigcode keinen Lerneffekt hat.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/jul/03/mit-javascript-per-dom-color-abfragen/1789936?srt=yes#m1789936 wonk 2021-07-05T08:58:08Z 2021-07-05T08:59:07Z mit javascript per DOM color abfragen <p>Hallo,</p> <p>ich will es ja eigentlich auch verstehen, bin aber kein javascipt-Fachmann, insbesondere nicht im DOM-Bereich.</p> <p>Ich habe es jetzt aber herausbekommen. "rgb(0, 0, 0)" (für Farbe schwarz) ist vom Typ String. Die Abfrage muss also lauten:</p> <p>if (aktuellerStyle.color == "rgb(0, 0, 0)" { ...</p> <p>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.</p> <p>Gruss, wonk</p> https://forum.selfhtml.org/self/2021/jul/03/mit-javascript-per-dom-color-abfragen/1789937?srt=yes#m1789937 Rolf B 2021-07-05T09:23:55Z 2021-07-05T09:23:55Z mit javascript per DOM color abfragen <p>Hallo wonk,</p> <p>sehr gut </p> <p>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.</p> <p>Beachte auch, dass Du nicht rgb(r, g, b), sondern rgba(r, g, b, a) zurückbekommst, wenn die Farbe Transparenz enthält.</p> <p>Bei <a href="https://stackoverflow.com/questions/67005331/is-color-format-specified-in-the-spec-for-getcomputedstyle" rel="noopener noreferrer">Stackoverflow</a> 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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div>