Einem neu erzeugtem Button eine bestimmte Position zuweisen

[Gunnar Bittersmann]

@@webity

Ja ich bin noch Anfänger. Ich gehe gerade ein Javascript - Online Kurs durch, bei dem gerade das DOM erklärt wird.

Du lernst JavaScript vor CSS?

Dabei kommt dann raus, Dinge mit JavaScript umzusetzen, die überhaupt nicht mit JavaScript gemacht werden sollten: Layout-Sachen, die mit CSS gemacht werden können. Und sollten!

Dass mit JavaScript auf alles geballert wird, was bei drei nicht auf’m Baum ist, ist ein Grundübel heutiger Webentwicklung. Viele, die sich „Frontend-Entwickler“ nennen, können zwar JavaScript, ihnen mangelt es aber an CSS-Kenntnissen. 😫

Um Elemente im Kreis anzuordnen, braucht man genau soviel JavaScript:

Ja, richtig gelesen: gar keins. ☞ button circle

(Das Beispiel ist für bis zu einem Dutzend Buttons gemacht. Wenn’s mehr werden sollten, sind noch entsprechende Regeln hinzuzufügen. Möglicherweise wird man zukünftig auch CSS-Counter in Berechnungen verwenden können, sodass man sowas nicht mehr braucht.)

Und da wird nicht mit festen Pixelgrößen rumhantiert. Wenn der Viewport kleiner wird, wird auch der Kreis kleiner.

Sollen jetzt Buttons hinzukommen oder wegfallen, müssen die lediglich im DOM eingefügt/entfernt werden, und deren Anzahl muss in --count geändert werden. Deshalb steht das auch mit im Markup. Es ist kein Inline-Style, sondern das style-Attribut wird verwendet, um ein Datum aus dem Markup an CSS weiterzureichen.

Und das ist auch nur Firefox geschuldet, der momentan :has() noch nicht richtig unterstützt. In Chromium und Safari können sich die Buttons schon selbst durchzählen. ☞ button circle, self-counting (wie oben, bis zu einem Dutzend)

Kein --count mehr im Markup (und bei dynamischen Änderungen im JavaScript). Einfach nur Buttons im DOM einfügen/entfernen. Die Plazierung übernimmt das Stylesheet.

🖖 Живіть довго і процвітайте

PS: Das Beispiel verwendet aktuelles CSS mit :has(), mathematischen Funktionen, Container-Einheiten, Nesting – all das, wovon sogenannte „Frontend-Entwickler“ noch nie gehört haben.