DIV Ausmaße vor Verwendung wissen (JS)

  • DIV Ausmaße vor Verwendung wissen (JS)

    Hallo, ich experimentiere gerade mit einem grid-layout.
    Ich habe natürlich bestehende CSS regeln.

    Jetzt erzeuge ich via JS ein neues DIV, fülle es mit text und bildern. jetzt möchte ich wissen, welche effektive breite und höhe das div "hätte", wenn ich es an dieser oder jener stelle platzieren würde.

    ist das möglich?

    Grüße,

    EHW

  • Okay,

    also ich nehmen wir z.B. den Stylesheet:

    Quellcode

    1. #column {
    2. background-color:white;
    3. width: 150;
    4. height: 550;
    5. left:50%;
    6. top:50%;
    7. position:absolute;
    9. margin:-275px 0px 0px -75px;
    10. overflow: hidden;
    11. }
    Alles anzeigen


    und einen container

    Quellcode

    1. <div id="column"></div>


    Jetzt erstelle ich ein neues DOM Element mit JS:

    Quellcode

    1. var element = document.createElement('div');
    2. element.id = "element";
    5. var picture = document.createElement("img");
    6. src = document.createAttribute("src");
    7. src.nodeValue = pictureUrl;
    8. height = document.createAttribute("height");
    9. height.nodeValue = height;
    10. width = document.createAttribute("width");
    11. width.nodeValue = width;
    12. snoopPicture.setAttributeNode(src);
    13. snoopPicture.setAttributeNode(height);
    14. snoopPicture.setAttributeNode(width);
    16. element.appendChild(picture);
    18. var text = document.createTextNode(text);
    19. element.appendChild(text);
    21. var column = document.getElementById("column");
    22. column.appendChild(element);
    Alles anzeigen


    Ich habe ein Array mit Objekten die wiederum die Werte text, pictureUrl, width und height zur Verfügung stellen. Im obigen Fall werden auf 'element' nun die geltenden CSS Regeln angewendet und damit folgt eine Breite und eine Höhe von Element. Diese Maße will ich aber wissen, bevor ich es tatsächlich am Bildschirm einsetze.

    z.B. im Array seien 3 Objekte. Ich erstelle daraus drei element-objekte und möchte nun wissen, welche gesamthöhe sie untereinander in column hätten.

    ich könnte die Elemente nacheinander hidden einsetzen und dann mit height oder clientHeight auslesen, aber das is dann doch bisle blöd, oder?


    grüße,

    EHW

  • einheitswurzel schrieb:

    ich könnte die Elemente nacheinander hidden einsetzen und dann mit height oder clientHeight auslesen, aber das is dann doch bisle blöd, oder?

    Doch, genau so musst du es machen. Um die Dimensionen von Containern zu erhalten, muss eben alles vom Browser gerendert werden. Versteckt oder nicht versteckt.
    Innerhalb einer Routine sind das nur drei Methodenaufrufe die im Millisekundenbereich abgearbeitet werden. Also nur zu!