Höhe eines dyn. erstellten Div ermitteln, nur mit JS

[JustMe28]

Guten Morgen Gemeinde,

es geht um das ermitteln der Höhe eines dyn. erstellten Div, nur mit JS

Also so etwas:

// irgendwo im .js

myText = document.createElement( "div" );

myText.className = "myClassName";

myText.innerHTML = "some Text, kann kurz oder lang sein, im Voraus nicht zu sagen ";

→ und hier brauche ich die Höhe des Div’s, da die untere Hälfte eine bestimmte backgroundColor beklommen soll.

Hier wird der Div dann mittels appendChild ins DOM eingehängt.

Versucht habe ich bereits: style: height, clientHeight, offsetHeight, getBoundingClientRect(), getComputedStyle()

aber das Ergebnis ist entweder 0 oder undefined.

Wie – oder wann – kann ich die Höhe dieses neuen Div’s bekommen? Er ist doch eigentlich fertig, oder? Als erstellt, CSS Gedöns zugewiesen und Text eingefügt.

Das ganze wie schon erwähnt nur mit Vanilla JS, Also kein jQuery oder sonstiges.

[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

[JustMe28]

Hallo Matthias, danke für die schnelle Antwort

Dann liegt es nicht an den verwendeten Methoden, sondern an Deinem Script, das du nicht gezeigt hast.

doch, habe ich:

// irgendwo im .js
myText = document.createElement( "div" );
myText.className = "myClassName";
myText.innerHTML = "some Text, kann kurz oder lang sein, im Voraus nicht zu sagen ";

-> hier sollte der Div doch schon erstellt sein?

→ und hier brauche ich dir Höhe des Div’s, da die untere Hälfte eine bestimmte backgroundColor beklommen soll. Evtl. später auch ein Image, Farbverlauf z. B. Diese Möglichkeit will ich mir offenhalten, deshalb gleich die Höhe, in diesem Fall dann CSS: background-size( z. B. 50% funktioniert mit einem Image nicht. Liegt wohl an der flexoblen Höhe des erstellten Div ) bzw JS: backgroundSize.

Oder geht das an dieser Stelle nicht?

Grüssle JustMe28

[X] Nail here for new Monitor

[MudGuard]

Hi,

// irgendwo im .js
myText = document.createElement( "div" );
myText.className = "myClassName";
myText.innerHTML = "some Text, kann kurz oder lang sein, im Voraus nicht zu sagen ";

-> hier sollte der Div doch schon erstellt sein?

erstellt ja, aber noch nicht ins Dokument eingehängt.

→ und hier brauche ich dir Höhe des Div’s, da die untere Hälfte eine bestimmte backgroundColor beklommen soll.

Daß das nicht nötig ist, weil's mit CSS geht, hat Matthias ja schon geschrieben.

cu,
Andreas a/k/a MudGuard

[Matthias Scharwies]

Servus!

Hallo Matthias, danke für die schnelle Antwort

Dann liegt es nicht an den verwendeten Methoden, sondern an Deinem Script, das du nicht gezeigt hast.

doch, habe ich:

// irgendwo im .js
myText = document.createElement( "div" );
myText.className = "myClassName";
myText.innerHTML = "some Text, kann kurz oder lang sein, im Voraus nicht zu sagen ";

-> hier sollte der Div doch schon erstellt sein?

sorry, überlesen. Nein du brauchst noch appendChild, damit es ins DOM eingehängt wird.

→ und hier brauche ich dir Höhe des Div’s, da die untere Hälfte eine bestimmte backgroundColor beklommen soll. Evtl. später auch ein Image, Farbverlauf z. B. Diese Möglichkeit will ich mir offenhalten, deshalb gleich die Höhe, in diesem Fall dann CSS: background-size( z. B. 50% funktioniert mit einem Image nicht. Liegt wohl an der flexoblen Höhe des erstellten Div ) bzw JS: backgroundSize.

Doch mit background-size, bzw. background-position muss das auch gehen.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo,

Nein du brauchst noch appendChild, damit es ins DOM eingehängt wird.

Weil der Browser ansonsten keine Abmessungen für das Element bestimmen kann und es ohne DOM-Zugehörigkeit wie 0×0 behandelt.

background-color wird nicht von background-size, -position, -repeat & Co beeinflusst. Es füllt das Element bis zum Rand (a.k.a. border-box) aus.

Will man nur die untere Hälfte füllen, muss es schon ein Bild sein. Ein Lineargradient ist ein Bild, weshalb er auch bei background-image angegeben wird.

Ob man nun für die obere Hälfte des Gradienten weiß oder transparent angibt, hängt vom Wunsch des Verwenders ab: soll ein mögliches Hintergrundbild oder -farbe in der oberen Hälfte durchscheinen oder nicht.

background-image reagiert jedenfalls definitiv auf -size, -position, -repeat, -clip und -origin. Wenn es das vermeintlich nicht tut, gibt es möglicherweise einen subtilen Syntaxfehler im CSS, oder auch ein Einfluss der CSS-Vorfahrtsregeln („Spezifität“). Das ist schnell passiert. Hier helfen die Entwicklerwerkzeuge des Browsers weiter, im DOM Inspektor findet man dann böse kleine Ausrufezeichen oder auch durchgestrichene Stil-Zuweisungen, wenn eine andere Zuweisung spezifischer war und Vorrang bekam. JustMe28 - du kennst die Entwicklerwerkzeuge? Taste F12 oder Strg+⬆️+I ?

Rolf

[JustMe28]

Hallo Rolf,

du kennst die Entwicklerwerkzeuge? Taste F12 oder Strg+⬆️+I ?

ja.

habe jetzt mal testweise ein .png mit Farbverlauf - weiß oben nach blau( 0,0,255 ) unten - erstellt.

// border zur Visualisierung, = Größe des Div
border: 1px solid lightsteelblue;

background-image: url(../image/wb-Image.png);
background-position: bottom;
background-repeat: repeat-x;
background-size: 50%;

damit ist der ganze Div blau.

Bei background-size: 5%; wird das .png in Originalgröße verwendet, egal wie hoch der Div ist. Und genau das soll nicht sein. Egal wie hoch der Div ist, unten soll blau und oben weiß sein.

Auch background-size: auto; ändert nichts, das .png hängt unten in Originalgröße.

[Tabellenkalk]

Hallo,

[X] Nail here for new Monitor

Ich bin mobil unterwegs. Gilt dein Angebot auch für ein neues Handy?

Gruß
Kalk

[JustMe28]

😁

btw. Handys haben ein Display - keinen Monitor

[JustMe28]

Ok, done.

Danke an alle!

[Rolf B]

Hallo JustMe28,

habe jetzt mal testweise ein .png mit Farbverlauf - weiß oben nach blau( 0,0,255 ) unten - erstellt.

Warum? Was hast Du gegen den linear-gradient? Zwingt Dich irgendein Legacykontext, den Internet Explorer 9 oder den Opera Mini zu unterstützen? (→ Kompatibilitätsinfo zu linear-gradient)

damit ist der ganze Div blau.

Bei background-size: 5%; wird das .png in Originalgröße verwendet, egal wie hoch der Div ist. Und genau das soll nicht sein. Egal wie hoch der Div ist, unten soll blau und oben weiß sein.

Durch die Fragmente, die Du gezeigt hast, kann das nicht sein. background-size: 5% bedeutet: Mach das Hintergrund so breit wie 5% der Elementbreite und so hoch wie 5% der Elementhöhe. Bei 50% und repeat-x würde das Bild auf 50% Elementbreite und 50% Elementhöhe skaliert, durch background-position unten angeordnet und sich dann horizontal wiederholen. Ganzes div blau - kann damit nicht sein, es muss weitere Einflüsse geben, die Du nicht zeigst.

Ok, done.

Das ist jetzt schade. Du berichtest von unmöglichem Fehlverhalten, sagst dann, es würde jetzt gehen und sagst aber nicht, worin der Irrtum bestand. Solche Irrtümer sind sehr lehrreich, sie zeigen auf, wo es Fehlerpotenziale gibt und wo man bei Problemen nachfragen muss.

Oder schlimmer noch - du hast jetzt irgendwelche Konstrukte erfunden, die das Problem umgehen, ohne es zu lösen.

Rolf

[Matthias Scharwies]

Servus!

Hallo JustMe28,

habe jetzt mal testweise ein .png mit Farbverlauf - weiß oben nach blau( 0,0,255 ) unten - erstellt.

Warum? Was hast Du gegen den linear-gradient?

Ich habe das Tutorial überarbeitet:

CSS/Tutorials/Hintergrund/Verläufe

• Die 3 (6) Funktionen mit ähnlicher Syntax finden sich jetzt auf einer Seite^[1]
• Anfangs wird erklärt, welche Vorteile die vom Browser erzeugten <Bilder> gegenüber Rastergrafiken haben.
• Es gibt mehr {{LiveBeispiel}}-Ansichten, damit man gleich sieht, wie's aussieht.
• Hinweise auf IE9-11 wurden entfernt.

Ich habe die Card in CSS/Tutorials aufgepeppt.

Das müsste man hier (CSS/Tutorials/Hintergrund) auch noch tun.

Herzliche Grüße

Matthias Scharwies

---

1. Und diese Seite hat statt 3x15KB „nur“ 24KB, weil Doppelungen wegfielen! ↩︎

[Tabellenkalk]

Hallo,

😁

btw. Handys haben ein Display - keinen Monitor

d.h. wenn ich beim Durchsdisplaynageln auch den Akku erwische, willst du mir den ersetzen?

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

genug genagelt!

Rolf