JavaScript und CSS

[Matthias Scharwies]

Servus!

Hallo Matthias,

wie heute besprochen:

Das ist schon wieder 2 Wochen her!

Hier die Portalseite mit Cards: JavaScript und CSS

Die Cards müssen morgen einzeln diskutiert und notfalls geändert werden.

• 1. CSS-Eigenschaften_setzen

Zuerst doch Style, als Hinführung ein kleines Beispiel mit hidden.

… dann erst classList und dann setProperty()

Lustig: Beispiel:Klassen_mit_JavaScript_umschalten_und_mit_CSS_nutzen hat Felix gar nicht mehr als seine Arbeit erkannnt! 😀

2. CSS-Eigenschaften auslesen

• sollte zu Beginn darauf hinweisen, dass JavaScript+CSS nicht immer der richtige Weg ist. Größenanpassungen können zumeist via CSS Layout erreicht werden. Nicht immer, klar.

Das haben @Felix Riesterer und ich gemeinsam formuliert. Jetzt müsste es (über)deutlich sein!

• Keine Empfehlung, welches Werkzeug das richtige ist, wir stellen hier nur vor, wie man CSS Werte ausliest.
• inhaltlich
  • Element.style liest nur die Eigenschaften aus, die direkt via style- Attribut zugewiesen sind
  • getComputedStyle() sammelt über die Kaskade alle zugewiesenen Eigenschaften ein, die gerade gelten
  • computedStyleMap() liefert ein ähnliches Objekt, aber im Typed OM
  • Meine Vermutung, dass bspw. width nicht den realen Wert liefert, sondern nur den per Stylesheet gesetzten Wert, der aber vom Layoutmodell nochmal geändert werden kann, ist falsch. Ein Element in einer Flexbox, das von der Flexbox vergrößert wird (flex-grow:1), liefert als width die echte Breite.

Ja, da ist aber nicht viel geändert; das war schon so!

4. CSSOM_und_Typed_OM

Ein Grundlagenartikel.

Beim Typed OM müssen wir überlegen, was mit dem 2. Teil der Blog-Serie zu Houdini passiert. Sie ist im Okt. 21 als Entwurf steckengelieben. Browsermäßig hat sich nicht viel getan. Das müssen wir diskutieren.

Herzliche Grüße

Matthias Scharwies