CSS: untere Hälfte eines Elements soll anderen Hintergrund erhalten

[Matthias Scharwies]

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:

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
  • 1.2.1 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:

.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