Javascript - Klasse ändern – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Javascript - Klasse ändern Fri, 03 Jun 22 15:35:07 Z https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799567#m1799567 https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799567#m1799567 <p>Hallo allerseits!</p> <p>Es ist schon recht lange her, dass ich nichts mehr von mir habe hören lassen. Es hat bei uns eine Reihe gesundheitlicher Probleme in der Familie gegeben. Deswegen hatte ich anderes im Kopf, als mich bei euch für eure Antworten zu bedanken. Das möchte ich hiermit nachholen. Und ich bitte vielmals um Entschuldigung.</p> <p>Damit Ihr nicht gezwungen seid, mein Profil nachzuschlagen, hier noch einmal eine Kurzvorstellung: Ich bin keine professionelle Entwicklerin, sondern bin im Bildungsbereich tätig. Mit HTML/CSS stelle ich mir unter anderem Dias her (als Alternative zu Powerpoint). Derzeit versuche ich, in Javascript einzusteigen. Das Ganze geht langsam vor sich, da ich überwiegend Autodidaktin bin. Hilfe vor Ort bekomme nur sporadisch und nur für einzelne meiner Programmierprobleme.</p> <p>So jetzt meine ersten Fragen (für die anderen Fragen werde ich gesonderte Posts abschicken):</p> <p>Auf eurer Seite <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/getElementById" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/getElementById</a> habt ihr ein Beispiel vorgestellt, bei dem es an einer Stelle heißt:</p> <pre><code><button data-attribut="hinweis">Hinweis</button> </code></pre> <p>Und an einer weiteren Stelle:</p> <pre><code>function ändereKlasse(event) {[...] name = button.getAttribute('data-attribut'),[...] } </code></pre> <p>Kann man den Ausdruck "data-attribut" durch andere Ausdrücke ersetzen? Durch welche? Ganz frei gewählt? Oder nur durch bestimmte? Oder ist "data-attribut" ein festgelegter Ausdruck, den man gar nicht ersetzen kann?</p> <p>(Um genau zu sein: Ich habe versucht, den Ausdruck zu ersetzen, und das hat in dem entsprechenden Beispiel funktioniert. Aber ich bin mir nicht sicher, ob das nur zufällig funktioniert hat und in Wirklichkeit schlechter Code ist, der in anderen Zusammenhängen nicht funktionieren würde.)</p> <p>Falls man "data-attribut" nicht ersetzen kann: Wie kann man vorgehen, wenn man in einer Datei zwei voneinander völlig unabhängige Klassenänderungen durchführen will?</p> <p>Vielen Dank im Voraus!</p> <p>Ingrid</p> Javascript - Klasse ändern Fri, 03 Jun 22 16:17:30 Z https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799571#m1799571 https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799571#m1799571 <p>Hallo</p> <blockquote> <p>Auf eurer Seite https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/getElementById habt ihr ein Beispiel vorgestellt, bei dem es an einer Stelle heißt:</p> <pre><code><button data-attribut="hinweis">Hinweis</button> </code></pre> <p>Und an einer weiteren Stelle:</p> <pre><code>function ändereKlasse(event) {[...] name = button.getAttribute('data-attribut'),[...] } </code></pre> <p>Kann man den Ausdruck "data-attribut" durch andere Ausdrücke ersetzen?</p> </blockquote> <p>Ja.</p> <blockquote> <p>Durch welche?</p> </blockquote> <p>Solche, die mit <code>data-</code> beginnen oder durch ein „offizielles“ HTML-Attribut.</p> <blockquote> <p>Ganz frei gewählt?</p> </blockquote> <p>Nein nicht „ganz frei“, sondern innerhalb der oben skizzierten Grenzen.</p> <blockquote> <p>Oder ist "data-attribut" ein festgelegter Ausdruck, den man gar nicht ersetzen kann?</p> </blockquote> <p>Früher gab es nur die Attribute, die die Sprache HTML von sich aus bereitstellte. Mittlerweile wurde die Möglichkeit geschaffen, in HTML eigene Attribute einzufügen. Voraussetzung ist, dass ihre Namen mit <code>data-</code> beginnen.</p> <p>Da <code>getAttribute</code> schlicht ein beliebiges Attribut anspricht, dessen Name innerhalb des Klammerpaares angegeben wird, kannst du irgendein, ein den Regeln von HTML entsprechendes, Attribut benennen, auf das zu zugreifen willst.</p> <blockquote> <p>(Um genau zu sein: Ich habe versucht, den Ausdruck zu ersetzen, und das hat in dem entsprechenden Beispiel funktioniert. Aber ich bin mir nicht sicher, ob das nur zufällig funktioniert hat und in Wirklichkeit schlechter Code ist, der in anderen Zusammenhängen nicht funktionieren würde.)</p> </blockquote> <p>Wie gesagt, solange das Attribut den zugrundeliegenden regeln entspricht, kannst du es auch in <code>getAttribute</code> verwenden.</p> <blockquote> <p>Falls man "data-attribut" nicht ersetzen kann: Wie kann man vorgehen, wenn man in einer Datei zwei voneinander völlig unabhängige Klassenänderungen durchführen will?</p> </blockquote> <p>Um speziell Klassen einzufügen oder zu entfernen, kannst du <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/classList" rel="nofollow noopener noreferrer"><code>classList</code></a> verwenden. Das ist noch etwas einfacher zu benutzen.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> 200 ist das neue 35. </div> Javascript - Klasse ändern Fri, 03 Jun 22 18:36:11 Z https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799575#m1799575 https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799575#m1799575 <p>Hallo Ingrid,</p> <p>das Beispiel im Wiki war ziemlich antik. Ich habe es etwas modernisiert. Ob es sich als Beispiel für eine elementare Methode wie getElementById eignet, mag diskussionsfähig sein. Ich finde es dafür zu kompliziert. Aber egal.</p> <p>Was data-Attribute sind, hat Auge bereits erklärt. Im Beispiel veraltet war aber der Zugriff mit getAttribute. Jedes HTML Element hat eine Eigenschaft <code>dataset</code>, die die Werte der data-Attribute bereitstellt. Die Schreibweise der Attributnamen wird dabei leicht modifziert; ein data-Attribut wie <code>data-aussehen-klasse</code> würde sich als <code>dataset.aussehenKlasse</code> wiederfinden.</p> <p>Über die dataset-Eigenschaft könnte man auch den Inhalt eines data-Attributs verändern. <code>elem.dataset.aussehen = "grün"</code> würde den Wert des Attributs data-aussehen auf grün setzen.</p> <p>Veraltet war auch die Variablendeklaration mit <code>var</code>. Wenn man einen Wert speichert, ohne ihn nochmal überschreiben zu müssen, tut man das heute mit <code>const</code>. Alternativ gibt es <code>let</code> für veränderbare Werte.</p> <p>Mit dem Funktionsnamen <code>ändereKlasse</code> war ich auch nicht glücklich. Funktionen sollten möglichst nach dem fachlichen Sachverhalt benannt sein, nicht nach dem technischen Vorgehen. Genauso unglücklich fand ich den Namen des data-Attributs. Im Beispiel wird damit ein Aussehen festgelegt. Also sollte es auch so heißen: data-aussehen. Der Name <code>data-aussehen-klasse</code> könnte noch besser sein, aber manchmal kann man es mit der Lesbarkeit auch übertreiben </p> <p>Ich hoffe, keinen dummen Flüchtigkeitsfehler eingebaut zu haben. Das Beispiel im Frickl (klick auf "ausprobieren") funktioniert auf jeden Fall.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Javascript - Klasse ändern Sat, 04 Jun 22 10:29:23 Z https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799579#m1799579 https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799579#m1799579 <p>Danke vielmals. Mir wird einiges klarer.</p> <p>Eines habe ich jedoch nicht ganz verstanden:</p> <pre><code>` Im Beispiel veraltet war aber der Zugriff mit getAttribute. ` </code></pre> <p>Muss man dann nur "data-attribut" (oder einen eigenen erfundenen Namen) durch "dataset.attribut" ersetzen, oder muss in der Funktion noch mehr verändert werden?</p> <p>Ingrid</p> Javascript - Klasse ändern Mon, 06 Jun 22 06:03:20 Z https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799613#m1799613 https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799613#m1799613 <p>@@Rolf B</p> <blockquote> <p>das Beispiel im Wiki war ziemlich antik.</p> </blockquote> <p>Wie auch die Methode <code class="language-js"><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>. Mit <code class="language-js"><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> steht ein einheitliches Interface zur Verfügung, sodass man <code class="language-js"><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> eigentlich nicht mehr braucht. Das sollte zumindest erwäht werden.</p> <blockquote> <p>Ob es sich als Beispiel für eine elementare Methode wie getElementById eignet, mag diskussionsfähig sein. Ich finde es dafür zu kompliziert.</p> </blockquote> <p>Ja. Es ist ein Beispiel für alles mögliche. Das Eigentliche – die Selektion des Elements anhand der ID – geht dabei unter.</p> <p>IMHO ist</p> <pre><code class="block bad language-js"><span class="token keyword">const</span> aussehenKlasse <span class="token operator">=</span> geklickterButton<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>aussehen<span class="token punctuation">;</span> </code></pre> <p>unnötig. Ich würde das entfernen und</p> <pre><code class="block language-js">unentschlossenesElement<span class="token punctuation">.</span>className <span class="token operator">=</span> geklickterButton<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>aussehen<span class="token punctuation">;</span> </code></pre> <p>schreiben. Das verbessert die Verständlichkeit des Codes.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div> Javascript - Klasse ändern Sun, 05 Jun 22 18:12:28 Z https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799611#m1799611 https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799611#m1799611 <p>Hallo Ingrid!</p> <p>Nicht ganz. Du kannst schreiben:</p> <pre><code class="block language-javascript">button<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>attributname <span class="token operator">=</span> <span class="token string">"attributinhalt"</span><span class="token punctuation">;</span> </code></pre> <p>Natürlich nur, wenn die Variable "button" vorher definiert wurde und diese auch ein ausgewähltes HTML-Element ist.</p> <p>Au revoir,<br> Samuel Fiedler</p> <div class="signature">-- <br> In CSS gibt es ja position: ab<em>solute</em>; und position: <strong>re</strong>lative;. Was ist nun die Mischung daraus?<br> Ganz klar: position: <strong>re</strong><em>solute</em>! </div> Javascript - Klasse ändern Mon, 06 Jun 22 06:32:35 Z https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799614#m1799614 https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799614#m1799614 <p>Hallo,</p> <blockquote> <p>Ich würde […]</p> <pre><code class="block language-js">unentschlossenesElement<span class="token punctuation">.</span>className <span class="token operator">=</span> geklickterButton<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>aussehen<span class="token punctuation">;</span> </code></pre> <p>schreiben. Das verbessert die Verständlichkeit des Codes.</p> </blockquote> <p>Findest du das wirklich verständlich? Ich rätsel was du mit unentschlossen in Bezug auf ein Element meinst…</p> <p>Edith möchte noch wissen, für welche Optionen sich irgendein Element denn entschließen kann...</p> <p>Gruß<br> Kalk</p> Javascript - Klasse ändern Mon, 06 Jun 22 11:32:16 Z https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799618#m1799618 https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799618#m1799618 <p>@@Tabellenkalk</p> <blockquote> <blockquote> <p>Ich würde […]</p> <pre><code class="block language-js">unentschlossenesElement<span class="token punctuation">.</span>className <span class="token operator">=</span> geklickterButton<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>aussehen<span class="token punctuation">;</span> </code></pre> <p>schreiben. Das verbessert die Verständlichkeit des Codes.</p> </blockquote> <p>Findest du das wirklich verständlich? Ich rätsel was du mit unentschlossen in Bezug auf ein Element meinst…</p> </blockquote> <p>Mir ging’s da eher um den Teil nach dem Gleichheitszeichen.</p> <p>Aber ja, der Variablenbezeichner ist auch nicht gerade günstig gewählt.</p> <blockquote> <p>Edith möchte noch wissen, für welche Optionen sich irgendein Element denn entschließen kann...</p> </blockquote> <p>Sag ihr: für einen der drei Buttons („Hinweis“, „Empfehlung“, „noch mal anders“).</p> <p>Und dann habt ihr mit dem <a href="https://de.wikipedia.org/wiki/Ziegenproblem" rel="nofollow noopener noreferrer">Ziegenproblem</a> genug Gesprächsstoff für den Rest des Tages. </p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div> Javascript - Klasse ändern Mon, 06 Jun 22 21:19:08 Z https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799631#m1799631 https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799631#m1799631 <p>Hallo Gunnar,</p> <blockquote> <p>Aber ja, der Variablenbezeichner ist auch nicht gerade günstig gewählt.</p> </blockquote> <p>ich bin einfach bei dem Urspungsbeispiel geblieben. Da ist ein Element mit id="unentschlossen" und die Variable nimmt darauf Bezug. Das schien mir eigentlich gut nachvollziehbar.</p> <p>Tabellenkalks Frage nach den Optionen fand ich merkwürdig. Wenn ich mir nur das Script anschaue, verstehe ich natürlich nicht alles. HTML und Script gehören zusammen, und dann sollte eigentlich klar sein, was passiert.</p> <p>Einem Anfänger vielleicht nicht, ok.</p> <p>Ist es sinnvoll, Codebeispiele für eine bestimmte Menge an Sprachelementen einmal zentral zu präsentieren und bei den jeweiligen Sprachelementen einfach darauf zu verweisen? Ich sehe ja durchaus ein, dass das Beispiel für getElementById überdimensioniert ist.</p> <p>Dass getElementById obsolet ist, sehe ich nicht unbedingt so. Sicher, querySelector ist (a) einheitlicher und (b) auch auf Element-Ebene verfügar, und damit flexibler. Aber es gibt die alte Methode eben noch, und ihre Existenz zu verschweigen ist auch nicht richtig. Man kann sicherlich bei getElementById einen Vermerk machen. Ich mache mir dann nur Gedanken um den Umfang des Artikels. Das ist eine Simpel-Methode. Ist es lehrreich, deren Beschreibung mit Abhandlungen diverser Art vollzupacken? Ich muss mir diesen Bereich noch mal in Ruhe anschauen… Aber im Urlaub hat man keine Ruhe dafür, dann meutert die Urlaubsbegleitung </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Javascript - Klasse ändern Tue, 07 Jun 22 09:14:45 Z https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799633#m1799633 https://forum.selfhtml.org/self/2022/jun/03/javascript-klasse-andern/1799633#m1799633 <p>@@Rolf B</p> <blockquote> <blockquote> <p>Aber ja, der Variablenbezeichner ist auch nicht gerade günstig gewählt.</p> </blockquote> <p>ich bin einfach bei dem Urspungsbeispiel geblieben. Da ist ein Element mit id="unentschlossen" und die Variable nimmt darauf Bezug. Das schien mir eigentlich gut nachvollziehbar.</p> </blockquote> <p>Ja, das ist nachvollziehbar. Schon der Bezeichner der ID ist nicht günstig gewählt.</p> <blockquote> <p>Ich sehe ja durchaus ein, dass das Beispiel für getElementById überdimensioniert ist.</p> </blockquote> <p>Vielleicht einfach ein Beispiel, wofür das Selektieren anhand ID oft verwendet wird: um einem Button eine Aktion zuzuweisen? Sowas wie</p> <pre><code class="block language-js"><span class="token keyword">const</span> menuButton <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'menu-button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> menuButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> menuButton<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span> <span class="token string">'aria-expanded'</span><span class="token punctuation">,</span> menuButton<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'aria-expanded'</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'true'</span> <span class="token operator">?</span> <span class="token string">'false'</span> <span class="token operator">:</span> <span class="token string">'true'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>(Das ARIA-Attribut sollte an der Stelle nicht beschrieben werden. Aber eine Verlinkung tut gut.)</p> <blockquote> <p>Dass getElementById obsolet ist, sehe ich nicht unbedingt so. Sicher, querySelector ist (a) einheitlicher und (b) auch auf Element-Ebene verfügar, und damit flexibler. Aber es gibt die alte Methode eben noch, und ihre Existenz zu verschweigen ist auch nicht richtig.</p> </blockquote> <p>Natürlich nicht.</p> <blockquote> <p>Man kann sicherlich bei getElementById einen Vermerk machen.</p> </blockquote> <p>Ja, einfach ein Satz wie „Statt <code class="language-js">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'bezeichner'</span><span class="token punctuation">)</span></code> kann man auch <code class="language-js">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#bezeichner'</span><span class="token punctuation">)</span></code> verwenden“.</p> <p>(Bzw. „Statt <code class="language-js">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>ausdruck<span class="token punctuation">)</span></code> kann man auch <code class="language-js">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">#</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>ausdruck<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span></code> verwenden“.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div>