Button bei Klick immer größer?

[Rolf B]

Hallo ttatoni,

habe ich das richtig verstanden? Bei jedem Klick soll er größer werden?

1. Click: 30px Padding
2. Click: 60px Padding
3. Click: 90px Padding

Matthias Idee mit dem custom property, das man hochsetzt, wäre eine Möglichkeit. Man muss es nur etwas anders machen, weil der Wert "30px" sich schlecht in JavaScript erhöhen lässt.

Besser wäre da sowas:

button {
   padding: calc(var(--polster) * 1.5em);
}

du zählst --polster pro Schritt um 1 hoch und überlässt das Gefummel mit Einheiten dem CSS System. Das kann das besser.

Damit wäre das initiale Padding 0. Wenn Du das nicht willst, braucht es einen passenden Anfangswert für --polster, oder du addierst in der Formel einen Mindestwert, z.B. so:

button {
   padding: calc(var(--polster) * 1.5em + 0.5em);
}

Damit wäre das Padding zu Anfang 0.5em, und wenn --polster hochgesetzt wird, wächst es entsprechend dem Wert in --polster.

Die Frage wäre nun noch, wo man --polster unterbringt. Soll die Polsterung ausschließlich für diesen einen Button gelten? Oder hast Du mehrere Buttons, die sich so verhalten sollen? Wachsen sie gemeinsam oder wächst nur der, auf den geklickt wird? Ein Custom Property kann überall im DOM gesetzt werden, und je höher im Baum es hängt, an desto mehr Elemente wird es vererbt.

Wenn ein und der selbe --polster-Wert für alle Buttons gelten soll, dann würde ich das custom-property an den body hängen. Oder als :root-Element, das läuft auf's gleiche hinaus. Gilt er nur für einen Button, oder soll an mehreren Buttons eigene Werte haben können, dann gehört er an den Button. Das ist jetzt dein Seitenlayout, das wir hier nicht kennen.

Der click-Handler für den Button würde dann dies tun:

btn.addEventListener("click", function() {
   let btnStyle = window.getComputedStyle(btn);
   let polster = parseInt(btnStyle.getPropertyValue("--polster")) || 0;
   btn.style.setProperty("--polster", polster + 1);
}

Das registriert einen click-Handler auf dem Element in der btn Variablen. Also mutmaßlich der Button, der geklickt werden soll 😀. Nun muss man abrufen, welche Stylewerte gerade für diesen Button gelten - mit getComputedStyle. Dort holen wir uns den Wert des custom property --polster heraus und machen einen int-Wert daraus. War --polster noch nicht gesetzt, kommt dabei NaN heraus, deswegen ein || 0 hintendran, um daraus 0 zu machen. Und schließlich wird das custom property wieder gesetzt, diesmal aber direkt in style des Buttons. Ob das richtig ist oder ob Du das woanders ablegen musst - siehe oben. Kommt auf deine Absichten an.

Der Effekt ist, dass --polster mit jedem Klick um 1 wächst und die Formel, die bei Padding angegeben ist, das Padding dadurch um den Wert vergrößert, mit dem --polster multipliziert wird.

Rolf