Guten Morgen, ich möchte gemeinsam mit euch [Nr. 5 unserer Baustellen](https://forum.selfhtml.org/self/2024/mar/01/baustellen-im-wiki-helfende-hande-gesucht/1813827#m1813827) diskutieren: > 5. 🛠  [**JavaScript und CSS**](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS#Siehe_auch) > - alles rund um das Thema „CSS durch JS Ändern“. Vieles ist mittlerweile durch den Einsatz von custom properties überholt - der Rest müsste sortiert und aktualisiert werden. Ich habe angefangen das Tutorial von @molily , das aus dem Jahre 2006-07 stammt, in Einzeltutorials zu zerlegen und zu aktualisieren: # 1. [JavaScript und CSS/CSS-Eigenschaften setzen](https://wiki-test.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_setzen) Thema ist das schnelle Ändern von style mit JS und warum man da eigentlich Klassen setzen oder ändern sollte. Deshalb kommt das noch vor das vermeintlich einfachere `style.color = 'red'; ` >>Mir ist z.B. aufgefallen, dass in der Seite nennen wir sie mal **CSS-Manipulation durch JavaScript**, nicht angegeben wurde, dass man mit der Methode add mehrere Klassen gleichzeitig hinzufügen kann. Das ist gefixt! Zum Schluss gibt es einen Abschnitt, der das Setzen von Custom propertys mit `setProperty`, bzw. das Auslesen mit `getPropertyValue()` vorstellt. Das ist die grundsätzliche Frage bei diesem Thema: Welche Methoden sollen wir noch empfehlen, wann ist es einfacher, auf Custom properties zu setzen? **Könntet ihr den Artikel bitte gegenlesen / redigieren?** # 2. [JavaScript und CSS/CSS-Eigenschaften auslesen](https://wiki-test.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen) Dieses Kapitel vergleicht das *legacy* `getComputedStyle` mit `getBoundingClientRect` und `computedStyleMap` und stellt dann die imho „praktischeren“ Technologien `resizeObserver`und `matchMedia` vor. Vorhandene Seiten der Elementreferenz sollen natürlich bleiben; von Seiten wie clientWidth, clientHeight, offsetWidth und offsetHeight muss eine Verlinkung erfolgen! ## Exkurs: Wiki-Struktur Da ist mir einfach aufgefallen, wie sich der JavaScript-Bereich in alle Richtungen entwickelt hat. Stefan Münz hatte in der Doku alle Eigenschaften und Methoden auf einer langen Seite angeordnet. *→ wird irgendwann zu lang* Dogma des Wiki war die Auftrennung in einzelne Seiten. Manche der „unwichtigeren“ Eigenschaften wie [JavaScript/DOM/Element/clientWidth](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/clientWidth) sind *Stubs*, von denen auch kein Link zu „ergiebigeren“ Seiten führte. *→ man findet bei euch nix!* 2015 trennte @Orlok Node- und Element-Schnittstellen, weil das „ja was ganz anderes sei“. Mittlerweile ist die style-Eigenschaft über HTMLElement zur [JavaScript/DOM/ElementCSSInlineStyle](https://wiki.selfhtml.org/wiki/JavaScript/DOM/ElementCSSInlineStyle)-Schnittstelle gewandert - Unbedarfte würden das aber wohl doch bei Element suchen und nicht finden. *Eine Übersichtsseite mit nur einer Methode sorgt für keine Übersicht.* *(Auch das bestehende Tutorial JavaScript/Tutorials/JavaScript und CSS war zwar bei JS, aber nicht bei CSS gelistet - das ist jetzt mein Ziel, das alles sichtbar und vorzeigbar zu präsentieren.)* ## [computedStylemap](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen#computedStyleMap) Ich finde, dass die Methode hier hin gehört - aber eben auch zu CSS Typed OM. Wo soll `CSSStyleValue` hinführen - zu diesem Beispiel oder einem Grundlagen-Tutorial? Da müsste man noch diskutieren, wie der Übergang aussieht. ## [ResizeObserver](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen#resizes_mit_resizeObserver) Da mach' ich noch ein Beispiel! **Könntet ihr den Artikel bitte gegenlesen / redigieren?** # 3. [JavaScript und CSS/Stylesheets dynamisch wechseln](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/Stylesheets_dynamisch_wechseln) Eigentlich eher ein legacy-Artikel, andererseits verwenden wir diese Technologie in unseren fertigen Beispielen, wie [der neue Siehe auch-Abschnitt](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/Stylesheets_dynamisch_wechseln#Siehe_auch) zeigt. # 4. [JavaScript_und_CSS/Stylesheets_dynamisch_ändern](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/Stylesheets_dynamisch_%C3%A4ndern) Das ist ein Stub. Neues Thema sollte ein Tutorial über **CSSOM** und evtl. auch **CSS Typed OM** sein. In der Spec ist dann gleich CSS.escape() mit drin, [7.5. The CSS namespace, and the supports() function](https://drafts.csswg.org/css-conditional-3/#the-css-interface) aber woanders. Inwieweit man das zusammen erklären kann oder sollte, weiß ich nicht! Da würde ich gerne intensiv diskutieren, auch inwieweit wir etwas wie *CSS Typed OM,* das vom Firefox in den letzten 3 Jahren nicht aufgenommen wurde, behandeln müssen. (Komisches Gefühl, das ein Beispiel im MDN Fehler wirft, weil es die Methode nicht kennt - ich sollte den Browser wechseln!) Das würde ich gerne am 06.03. am Stammtisch diskutieren. Herzliche Grüße Matthias Scharwies

Guten Morgen, ich möchte gemeinsam mit euch [Nr. 5 unserer Baustellen](https://forum.selfhtml.org/self/2024/mar/01/baustellen-im-wiki-helfende-hande-gesucht/1813827#m1813827) diskutieren: > 5. 🛠  [**JavaScript und CSS**](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS#Siehe_auch) > - alles rund um das Thema „CSS durch JS Ändern“. Vieles ist mittlerweile durch den Einsatz von custom properties überholt - der Rest müsste sortiert und aktualisiert werden. Ich habe angefangen das Tutorial von @molily , das aus dem Jahre 2006-07 stammt, in Einzeltutorials zu zerlegen und zu aktualisieren: # 1. [JavaScript und CSS/CSS-Eigenschaften setzen](https://wiki-test.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_setzen) Thema ist das schnelle Ändern von style mit JS und warum man da eigentlich Klassen setzen oder ändern sollte. Deshalb kommt das noch vor das vermeintlich einfachere `style.color = 'red'; ` >>Mir ist z.B. aufgefallen, dass in der Seite nennen wir sie mal **CSS-Manipulation durch JavaScript**, nicht angegeben wurde, dass man mit der Methode add mehrere Klassen gleichzeitig hinzufügen kann. Das ist gefixt! Zum Schluss gibt es einen Abschnitt, der das Setzen von Custom propertys mit `setProperty`, bzw. das Auslesen mit `getPropertyValue()` vorstellt. Das ist die grundsätzliche Frage bei diesem Thema: Welche Methoden sollen wir noch empfehlen, wann ist es einfacher, auf Custom properties zu setzen? **Könntet ihr den Artikel bitte gegenlesen / redigieren?** # 2. [JavaScript und CSS/CSS-Eigenschaften auslesen](https://wiki-test.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen) Dieses Kapitel vergleicht das *legacy* `getComputedStyle` mit `getBoundingClientRect` und `computedStyleMap` und stellt dann die imho „praktischeren“ Technologien `resizeObserver`und `matchMedia` vor. Vorhandene Seiten der Elementreferenz sollen natürlich bleiben; von Seiten wie clientWidth, clientHeight, offsetWidth und offsetHeight muss eine Verlinkung erfolgen! ## Exkurs: Wiki-Struktur Da ist mir einfach aufgefallen, wie sich der JavaScript-Bereich in alle Richtungen entwickelt hat. Stefan Münz hatte in der Doku alle Eigenschaften und Methoden auf einer langen Seite angeordnet. *→ wird irgendwann zu lang* Dogma des Wiki war die Auftrennung in einzelne Seiten. Manche der „unwichtigeren“ Eigenschaften wie [JavaScript/DOM/Element/clientWidth](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/clientWidth) sind *Stubs*, von denen auch kein Link zu „ergiebigeren“ Seiten führte. *→ man findet bei euch nix!* 2015 trennte @Orlok Node- und Element-Schnittstellen, weil das „ja was ganz anderes sei“. Mittlerweile ist die style-Eigenschaft über HTMLElement zur [JavaScript/DOM/ElementCSSInlineStyle](https://wiki.selfhtml.org/wiki/JavaScript/DOM/ElementCSSInlineStyle)-Schnittstelle gewandert - Unbedarfte würden das aber wohl doch bei Element suchen und nicht finden. *Eine Übersichtsseite mit nur einer Methode sorgt für keine Übersicht.* *(Auch das bestehende Tutorial JavaScript/Tutorials/JavaScript und CSS war zwar bei JS, aber nicht bei CSS gelistet - das ist jetzt mein Ziel, das alles sichtbar und vorzeigbar zu präsentieren.)* ## [computedStylemap](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen#computedStyleMap) Ich finde, dass die Methode hier hin gehört - aber eben auch zu CSS Typed OM. Da müsste man noch diskutieren, wie der Übergang aussieht. ## [ResizeObserver](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen#resizes_mit_resizeObserver) Da mach' ich noch ein Beispiel! **Könntet ihr den Artikel bitte gegenlesen / redigieren?** # 3. [JavaScript und CSS/Stylesheets dynamisch wechseln](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/Stylesheets_dynamisch_wechseln) Eigentlich eher ein legacy-Artikel, andererseits verwenden wir diese Technologie in unseren fertigen Beispielen, wie [der neue Siehe auch-Abschnitt](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/Stylesheets_dynamisch_wechseln#Siehe_auch) zeigt. # 4. [JavaScript_und_CSS/Stylesheets_dynamisch_ändern](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/Stylesheets_dynamisch_%C3%A4ndern) Das ist ein Stub. Neues Thema sollte ein Tutorial über **CSSOM** und evtl. auch **CSS Typed OM** sein. In der Spec ist dann gleich CSS.escape() mit drin, [7.5. The CSS namespace, and the supports() function](https://drafts.csswg.org/css-conditional-3/#the-css-interface) aber woanders. Inwieweit man das zusammen erklären kann oder sollte, weiß ich nicht! Da würde ich gerne intensiv diskutieren, auch inwieweit wir etwas wie *CSS Typed OM,* das vom Firefox in den letzten 3 Jahren nicht aufgenommen wurde, behandeln müssen. (Komisches Gefühl, das ein Beispiel im MDN Fehler wirft, weil es die Methode nicht kennt - ich sollte den Browser wechseln!) Das würde ich gerne am 06.03. am Stammtisch diskutieren. Herzliche Grüße Matthias Scharwies