✔ Größe eins Elements inkl. Border & Margin ermitteln

[NetBull]

Hi Leute,

ich habe einen CSS Block in dem ein Image Element mit Margin und Border beschrieben wird. Nun will ich dieses mit JavaScript und verschiedenen Inhalten in einem DIV der sich dem Bildschirm sauber anpasst platzieren.

Wie kann ich die Höhe und Breite eines als Klasse formatierten Elements herausfinden, bevor ich es platziere? Inkl. der Margins und Borders?

LG NetBu||

 

[threadi]

http://de.selfhtml.org/javascript/objekte/all.htm#offset_height

 

[NetBull]

Danke....
das ist schon mal hilfreich.

mit document.getElementById("img_thmb_5").offsetHeight geht es auch...

Aber wie kann ich die Größe des Elementes bestimmen, das aus einer CSS Klasse erzeugt wird, bevor ich das erzeuge?

 

[hela]

Aber wie kann ich die Größe des Elementes bestimmen, das aus einer CSS Klasse erzeugt wird, bevor ich das erzeuge?

Hallo,
du könntest z.B. über DOM-Methoden das STYLE-Element des Dokument-Headers auslesen und parsen.
Die entsprechenden Suchworte für deine Lieblingssuchmaschine könnten z.B. "dom css-block auslesen" sein, dort wird man auf jeden Fall fündig.

 

[NetBull]

Ok, klingt schon mal gut. Aber ich wäre dann gezwungen zu errechnen wie viel Border, margin & padding, size un andere effekte gesetzt sind. Aktuell erzeuge ich das Element, teste die tatsächliche Größe mit .offsetHeight und .offsetWidth und manipuliere es notfalls noch, bevor ich es als Child an ein anderes Tag hänge. Gibt es noch eine elegantere Methode?

 

[hela]

Ok, klingt schon mal gut. Aber ich wäre dann gezwungen zu errechnen wie viel Border, margin & padding, size un andere effekte gesetzt sind...

Ja, geschenkt wird selten was.

... Aktuell erzeuge ich das Element, teste die tatsächliche Größe mit .offsetHeight und .offsetWidth und manipuliere es notfalls noch, bevor ich es als Child an ein anderes Tag hänge. Gibt es noch eine elegantere Methode?

Nach m.E. sollte man nach dem Einfügen eines Elements in einen anderen Block prüfen, ob wesentliche Eigenschaften noch gegeben sind. Es gibt CSS-Eigenschaften, die werden vom Elternelement vererbt und auch die Spezifität der CSS-Deklaration kann dazu führen, dass Eigenschaften überschrieben werden.
Wenn du das vorher alles beachten möchtest, dann erfordert das allerhand Weitblick und mächtigen Aufwand.

 

[NetBull]

OK, so ungefähr bin ich dann auf dem richtigen Weg, muss dann nur das neue Parent nach dem Einbinden daraufhin prüfen ob es noch dieselben Maße hat wie vorher, richtig?

 

[hela]

Ja, ich glaub' schon. Ein bisschen Überraschung ist immer dabei, das erhöht aber den Lerneffekt.

 

[NetBull]

Überraschungen sind aber nicht so das Ding, bisher habe ich eher C# Windows Anwendugnen gebaut, die Überraschungseier überlass ich liebe denen von Ferrero.

.... irgendwie suche ich auch noch debugging und Unit-Test Lösungen. hab so einiges gefunden aber wenig komfortable.