Servus! > Guten Morgen Gemeinde, > > es geht um das ermitteln der Höhe eines dyn. erstellten Div, nur mit JS > > Versucht habe ich bereits: style: height, clientHeight, offsetHeight, getBoundingClientRect(), getComputedStyle() Das sollte mit offsetHeight gehen: ~~~ JavaScript const element = document.querySelector('.my-className'); const height = element.offsetHeight; // includes padding but not margin console.log("Element height:", height); ~~~ > > aber das Ergebnis ist entweder 0 oder undefined. Dann liegt es nicht an den verwendeten Methoden, sondern an Deinem Script, das du nicht gezeigt hast. Zum Verständnis: * [JavaScript_und_CSS/CSS-Eigenschaften_auslesen](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen) - [1.2.1 getBoundingClientRect](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen#getBoundingClientRect) Dort steht ganz am Anfag: Meist ist es nicht nötig, diese Werte zu ermitteln, da sich ein responsives Layout unabhängig von genauen Pixelangaben an den Viewport anpasst. Media Queries Grid Layout und Container Queries ermöglichen es, dass der Browser Seitenelemente automatisch ohne weiteres Zutun des Entwicklers passend positioniert. **Wenn du aktuelle Pixelwerte benötigst, um dein Layout mit JavaScript zu steuern, hast du schon vorher konzeptuelle Fehler eingebaut!** >→ und hier brauche ich die Höhe des Div’s, da die untere Hälfte eine bestimmte backgroundColor beklommen soll. Kein Problem ohne JS, nur mit einem [Verlauf](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund/linear-gradient\(\)) im background: ~~~ CSS .my-className { background-image: linear-gradient(to bottom, white 50%, pink 50% ); } ~~~ Der Verlauf hat keinen weichen Übergang, sondern eine scharfe Kante bei 50%. Herzliche Grüße Matthias Scharwies -- Was ist eine Signatur?

Servus! > Guten Morgen Gemeinde, > > es geht um das ermitteln der Höhe eines dyn. erstellten Div, nur mit JS > > Versucht habe ich bereits: style: height, clientHeight, offsetHeight, getBoundingClientRect(), getComputedStyle() Das sollte mit offsetHeight gehen: ~~~ JavaScript const element = document.querySelector('.my-className'); const height = element.offsetHeight; // includes padding but not margin console.log("Element height:", height); ~~~ > > aber das Ergebnis ist entweder 0 oder undefined. Dann liegt es nicht an den verwendeten Methoden, sondern an Deinem Script, das du nicht gezeigt hast. Zum Verständnis: * [JavaScript_und_CSS/CSS-Eigenschaften_auslesen](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen) - [1.2.1 getBoundingClientRect](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen#getBoundingClientRect) Dort steht ganz am Anfag: Meist ist es nicht nötig, diese Werte zu ermitteln, da sich ein responsives Layout unabhängig von genauen Pixelangaben an den Viewport anpasst. Media Queries Grid Layout und Container Queries ermöglichen es, dass der Browser Seitenelemente automatisch ohne weiteres Zutun des Entwicklers passend positioniert. **Wenn du aktuelle Pixelwerte benötigst, um dein Layout mit JavaScript zu steuern, hast du schon vorher konzeptuelle Fehler eingebaut!** >→ und hier brauche ich die Höhe des Div’s, da die untere Hälfte eine bestimmte backgroundColor beklommen soll. Kein Problem ohne JS, nur mit einem [Verlauf](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund/linear-gradient\(\)) im background: ~~~ CSS .my-className { background-image: linear-gradient(to bottom, white 50%, pink 50% ); } ~~~ Der Verlauf hat keinen weichen Übergang, sondern eine scharfe Kante bei 50%. Herzliche Grüße Matthias Scharwies -- Was ist eine Signatur?

Servus! > Guten Morgen Gemeinde, > > es geht um das ermitteln der Höhe eines dyn. erstellten Div, nur mit JS > > Versucht habe ich bereits: style: height, clientHeight, offsetHeight, getBoundingClientRect(), getComputedStyle() Das sollte mit offsetHeight gehen: ~~~ JavaScript const element = document.querySelector('.my-className'); const height = element.offsetHeight; // includes padding but not margin console.log("Element height:", height); ~~~ > > aber das Ergebnis ist entweder 0 oder undefined. Dann liegt es nicht an den verwendeten Methoden, sondern an Deinem Script, das du nicht gezeigt hast. Zum Verständnis: * [JavaScript_und_CSS/CSS-Eigenschaften_auslesen](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen) - [1.2.1 getBoundingClientRect](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen#getBoundingClientRect) Dort steht ganz am Anfag: Meist ist es nicht nötig, diese Werte zu ermitteln, da sich ein responsives Layout unabhängig von genauen Pixelangaben an den Viewport anpasst. Media Queries Grid Layout und Container Queries ermöglichen es, dass der Browser Seitenelemente automatisch ohne weiteres Zutun des Entwicklers passend positioniert. **Wenn du aktuelle Pixelwerte benötigst, um dein Layout mit JavaScript zu steuern, hast du schon vorher konzeptuelle Fehler eingebaut!** >→ und hier brauche ich die Höhe des Div’s, da die untere Hälfte eine bestimmte backgroundColor beklommen soll. Kein Problem ohne JS, nur mit einem Verlauf im background: ~~~ CSS .my-className { background-image: linear-gradient(to bottom, white 50%, pink 50% ); } ~~~ Herzliche Grüße Matthias Scharwies -- Was ist eine Signatur?

Servus! > Guten Morgen Gemeinde, > > es geht um das ermitteln der Höhe eines dyn. erstellten Div, nur mit JS > > Versucht habe ich bereits: style: height, clientHeight, offsetHeight, getBoundingClientRect(), getComputedStyle() Das sollte mit offsetHeight gehen: ~~~ JavaScript const element = document.querySelector('.my-className'); const height = element.offsetHeight; // includes padding but not margin console.log("Element height:", height); ~~~ > > aber das Ergebnis ist entweder 0 oder undefined. Dann liegt es nicht an den verwendeten Methoden, sondern an Deinem Script, das du nicht gezeigt hast. Zzum Verständnis: * [JavaScript_und_CSS/CSS-Eigenschaften_auslesen](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen) - [1.2.1 getBoundingClientRect](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen#getBoundingClientRect) Herzliche Grüße Matthias Scharwies -- Was ist eine Signatur?

Servus! > Guten Morgen Gemeinde, > > es geht um das ermitteln der Höhe eines dyn. erstellten Div, nur mit JS > > Versucht habe ich bereits: style: height, clientHeight, offsetHeight, getBoundingClientRect(), getComputedStyle() Das sollte mit offsetHeight gehen: ~~~ JavaScript const element = document.querySelector('.my-className'); const height = element.offsetHeight; // includes padding but not margin console.log("Element height:", height); ~~~ > > aber das Ergebnis ist entweder 0 oder undefined. Dann liegt es nicht an den verwendeten Methoden, sdondern an Deinem Script, das du nicht gezeigt hast. Zzum Verständnis: * [JavaScript_und_CSS/CSS-Eigenschaften_auslesen](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen) - [1.2.1 getBoundingClientRect](https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen#getBoundingClientRect) Herzliche Grüße Matthias Scharwies -- Was ist eine Signatur?