Kommunikation von Variablen zwischen Stylesheet und Javascript

[Rudi K.]

Tach,

Wie können Variablenwerte zwischen einem CSS-Stylesheet und Javascript am effizientesten kommunizieren?

So ich das richtig verstehe, beschränkt sich

element.style.setProperty("--foo-bar", WERT);

ja nur auf inline styles.

(Dabei ist es für mich sekundär, in welche Richtung die Kommunikation vonstatten geht, also ob Stylesheet → Javascript oder Stylesheet ← Javascript)

Dank euren messerscharfen Analysen recht und wünsche einen erquickenden Sonntag.

[Matthias Scharwies]

Servus!

Tach,

Wie können Variablenwerte zwischen einem CSS-Stylesheet und Javascript am effizientesten kommunizieren?

So ich das richtig verstehe, beschränkt sich

element.style.setProperty("--foo-bar", WERT);

ja nur auf inline styles.

Ja. Das SELF-Wiki hat ein Grundlagen-Tutorial: JavaScript/Tutorials/JavaScript_und_CSS

hier werden die 3 grundlegenden Sachen besprochen:

• Stylesheet-Regeln auf ein Element anwenden
  • className und classList
  • Zusammenspiel von CSS-Regeln und Klassenzuweisung
• Direktformatierung über das style-Objekt
• CSS-Eigenschaften mit GetComputedStyle auslesen

(Dabei ist es für mich sekundär, in welche Richtung die Kommunikation vonstatten geht, also ob Stylesheet → Javascript oder Stylesheet ← Javascript)

Du kannst aber auch das CSS-Stylesheet selbst ändern:

JavaScript/Tutorials/Stylesheets dynamisch ändern

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Wie können Variablenwerte zwischen einem CSS-Stylesheet und Javascript am effizientesten kommunizieren?

So ich das richtig verstehe, beschränkt sich

element.style.setProperty("--foo-bar", WERT);

ja nur auf inline styles.

Ja.

Worauf bezieht sich das Ja?

Das SELF-Wiki hat ein Grundlagen-Tutorial: JavaScript/Tutorials/JavaScript_und_CSS

Mir scheint, dass das, was da steht, an der Frage vorbeigeht.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Wie können Variablenwerte zwischen einem CSS-Stylesheet und Javascript am effizientesten kommunizieren? ... (Dabei ist es für mich sekundär, in welche Richtung die Kommunikation vonstatten geht, also ob Stylesheet → Javascript oder Stylesheet ← Javascript)

Ja.

Worauf bezieht sich das Ja?

Das SELF-Wiki hat ein Grundlagen-Tutorial: JavaScript/Tutorials/JavaScript_und_CSS

Mir scheint, dass das, was da steht, an der Frage vorbeigeht.

Du schreibst, dass du die Frage, bzw. die Fragestellung nicht verstanden hast, behauptest aber, dass das Grundlagen-Tutorial von molily an der Frage vorbeigeht?

Dank euch für den sonntäglichen Beirat.

Nach einiger Zeit des Erwägens dürfte getComputedStyle für meinen Anwendungsfall wohl die geeignetste Methode sein.

Das hat der Thread-Ersteller aus dem molily-Tutorial!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Du schreibst, dass du die Frage, bzw. die Fragestellung nicht verstanden hast

Nein.

behauptest aber, dass das Grundlagen-Tutorial von molily an der Frage vorbeigeht?

Von molily. Also wieviel Jahre alt? 🤣

Das Tutorial kann nicht auf der Höhe der Zeit sein, weil damals an custom properties noch gar nicht zu denken war.

Nach einiger Zeit des Erwägens dürfte getComputedStyle für meinen Anwendungsfall wohl die geeignetste Methode sein.

Das hat der Thread-Ersteller aus dem molily-Tutorial!

Und ohne den Anwendungsfall zu kennen kann niemand beurteilen, ob getComputedStyle die geeignetste Methode ist, oder ob es mit custom properties viel eleganter geht.

Also zieh die Diskussion bitte nicht ins Lächerliche.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Gunnar,

ich verstehe dich nicht. Bist du einfach nur in Pfingstlaune und hast eine Flammenzunge, mit der Du um Dich schlägst, oder weißt Du was, was wir nicht wissen?

Die Frage des OP war, wie man in JS auf „CSS Variablen“ - bka^[1] custom properties - zugreift, lesend und schreibend.

Custom properties sind erstmal CSS Properties, weswegen man in JS auch genauso auf sie zugreift.

Lesend geht meines Wissens mittels Zugriff auf das style-Attribut, wenn man nur die direkt am Element definierten custom properties haben will, oder mit getComputedStyle, wenn man die haben will, die aktuell zu diesem Element kaskadiert werden.

Schreibend geht durch Manipulation des style-Attributs oder von CSS Rules.

Das wurde beschrieben. Im Thread, und im Wiki. Dass die Quelle alt ist, ist unerheblich. CSS Properties sind es auch.

Gibt es andere Möglichkeiten, aus JS auf custom properties zuzugreifen, die wir hier übersehen und die Du - weil es Dir selbstverständlich scheint - nicht nennst?

Es mag nun sein, dass sich das eigentliche Problem des OP, das er mit JS-Zugriff auf custom properties lösen will, auch anders und eleganter lösen lässt. Aber damit würden wir das Thema verlassen und diese Frage wurde bisher auch gar nicht gestellt.

Rolf

---

1. better known as ↩︎

[Matthias Scharwies]

Servus!

Wie können Variablenwerte zwischen einem CSS-Stylesheet und Javascript am effizientesten kommunizieren?

Die Frage des OP war, wie man in JS auf „CSS Variablen“ - bka^[1] custom properties - zugreift, lesend und schreibend.

Ich glaube, dass der TE das nicht gemeint hat, sondern mit Variablenwert einfach den Wert des Regelsatzes gemeint hat, der der Wertzuweisung einer Variablen ähnlich sieht.

Custom properties sind erstmal CSS Properties, weswegen man in JS auch genauso auf sie zugreift.

Herzliche Grüße

Matthias Scharwies

---

1. better known as ↩︎

[Gunnar Bittersmann]

@@Rolf B

Die Frage des OP war, wie man in JS auf „CSS Variablen“ - bka custom properties - zugreift, lesend und schreibend.

Nein, das war sie nicht. Der OP fragte nach „Variablenwerten“. Das kann man wie du so deuten, dass damit „CSS-Variablen-Werte“ gemeint sein könnten.

Das kann man aber auch ganz anders deuten, dass damit Werte von CSS-Eigenschaften gemeint waren, die mit JS-Variablen korrespondieren sollten.

Möglich, dass deine Deutung stimmt. Möglich, dass meine stimmt. Vielleicht liegen wir auch beide falsch und der OP meinte noch was ganz anderes. Bei schlecht gestellten Fragen kann man nie wissen.

Gibt es andere Möglichkeiten, aus JS auf custom properties zuzugreifen, die wir hier übersehen und die Du - weil es Dir selbstverständlich scheint - nicht nennst?

Wenn meine Deutung stimmt, wäre die Frage: Gibt es andere Möglichkeiten, aus JS auf properties (ohne custom zuzugreifen? Und die Antwort: ja, custom properties könnten das gänzlich überflüssig machen. Für Genaueres müsste man den Anwendungsfall kennen.

Es mag nun sein, dass sich das eigentliche Problem des OP, das er mit JS-Zugriff auf custom properties lösen will, auch anders und eleganter lösen lässt. Aber damit würden wir das Thema verlassen und diese Frage wurde bisher auch gar nicht gestellt.

Dieser Absatz ist völliger Quatsch. In diesem Forum werden immer wieder Fragende von ihrem Holzweg auf einen besseren geführt.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Gunnar,

Gibt es andere Möglichkeiten, aus JS auf properties (ohne custom zuzugreifen? Und die Antwort: ja, custom properties könnten das gänzlich überflüssig machen.

Ich bin offenbar meilenweit weg von deinem Gedankengang. Er ist mir ein komplettes Rätsel, ich habe keine Ahnung, worauf Du hier hinaus willst.

TL;DR: Hä?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Gibt es andere Möglichkeiten, aus JS auf properties (ohne custom zuzugreifen? Und die Antwort: ja, custom properties könnten das gänzlich überflüssig machen.

Ich bin offenbar meilenweit weg von deinem Gedankengang. Er ist mir ein komplettes Rätsel, ich habe keine Ahnung, worauf Du hier hinaus willst.

Gib mir einen konkreten Anwendungsfall für getComputedStyle, woran ich das erkären könnte!

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rudi K.]

Tach,

Dank euch für den sonntäglichen Beirat.

Nach einiger Zeit des Erwägens dürfte getComputedStyle für meinen Anwendungsfall wohl die geeignetste Methode sein.

✌️

[Gunnar Bittersmann]

@@Rudi K.

Wie können Variablenwerte zwischen einem CSS-Stylesheet und Javascript am effizientesten kommunizieren?

Meinst du wirklich Effizienz? Oder Effektivität?

Die Antwort dürften wohl custom properties sein.

So ich das richtig verstehe, beschränkt sich

element.style.setProperty("--foo-bar", WERT);

ja nur auf inline styles.

?? Ich glaube, da versteht du was falsch.

(Dabei ist es für mich sekundär, in welche Richtung die Kommunikation vonstatten geht, also ob Stylesheet → Javascript oder Stylesheet ← Javascript)

Primär wäre: was ist dein Anwendungsfall?

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Rudi,

CSS Variablen gibt es nicht. Es handelt sich korrekt um custom properties.

Solche kann man per inline-style zuweisen, aber auch per CSS Regeln. Man muss dann nur zuerst den computed style bestimmen, um sie in JS verwenden zu können:

<div id="gangnam">
Lora Ibsum
</div>

#gangnam {
   --baz-fump: 47;
}

const gangnam = document.getElementById("gangnam");
const gangnamStyle = window.getComputedStyle(gangnam);
const bazFump = gangnamStyle.getPropertyValue("--baz-fump");

Diese Abfrage funktioniert nicht nur mit custom properties, sondern auch mit allen anderen.

Wenn man andersrum mit custom properties beeinflussen will, wie sich eine CSS Regel auf ein bestimmtes Element auswirkt, dann ist es sinnvoll, in der CSS Regel var(--foo) zu verwenden und --foo als inline-style zu setzen.

Es gibt auch ein CSS API, mit dem man CSS Regeln suchen und finden kann, und diese manipulieren, das müsste ich jetzt aber auch erstmal nachlesen.

Rolf