Beachten Sie die folgende Markierung:
%Vor% Ich möchte die tatsächliche endgültige Höhe von outerElement mit Javascript erhalten. Mir ist aufgefallen, dass ich, wenn ich die vertikalen Ränder von innerElement entferne, in der Lage bin zu bekommen, was ich will, aber ich kann keine Stile innerhalb von outerElement ändern.
Wie mache ich das?
Obs:
Ich habe bereits Höhe, scrollheight und offsetHeight in allen Browsern versucht. Chrome gibt mir den erwarteten Wert (einschließlich der Ränder des inneren Elements) für scrollHeight . Alle anderen Browser schlagen fehl.
Ich würde jQuery verwenden. Versuchen Sie es mit
%Vor%Und sehen Sie, ob das so ist.
Versuchen Sie es mit clientHeight
Ich weiß, was du denkst ... "Das wird nicht funktionieren!" und ach, das tut es nicht ... aber wenn du etwas wie outerElement hinzufügst ... sogar für einen Moment ...
Nicht die schönste Lösung, aber es funktioniert, und wenn Sie herausfinden können, warum es funktioniert (ich weiß verdammt noch mal nicht: P), könnten Sie näher an gut sein Lösung ...
Einige ältere Browser unterstützen es möglicherweise nicht, aber Sie müssten es sich ansehen; Ich kann sie nicht auflisten.
Das ist eine knifflige Frage, wie beurteilen Sie die "angemessene" Höhe? Die Höhe des Inhalts innerhalb einschließlich Grenzen, was ist Padding oder die tatsächliche Marge verwenden? Im Allgemeinen verhalten sich Browser in den meisten Dingen ziemlich konsistent, aber quirksmode kann aufklären, was Sie brauchen. (Als Hinweis, wenn Sie den tatsächlichen Rand verwendet, wird es weh tun.)
Ich schätze, du solltest alle Elementeigenschaften werfen und die Summe bilden nur auf diese Weise kannst du die genaue Höhe kennen ... aber im Fall der Höhe ist es zB klar gestellt: Beide Eigenschaften finde ich nicht ist möglich, die Höhe eines Elements zu kennen.
Ein 3-sekündiger Gedanke könnte etwa lauten:
var o document.getElementById ('id'). style;
%Vor%Aber ich denke, Sie müssen auch die document.getElementById ('ID') .Height-Wert, wenn sie es haben .... ist thogtgth kann aber helfen ..
am besten =)
WARNUNG WARNUNG clientHeight funktioniert fast, enthält jedoch keine Ränder: (
Ich dachte nur, ich würde das heute versuchen, und während Nahumsilva & amp; plodder hat es fast richtig (nahumsilvas Version scheint eher Browser-übergreifend zu sein. "plodder's scheint in Chrome / WebKit nicht zu funktionieren, aber ich bin kein Experte für diese Dinge"), beide haben verpasst, dass ein Element es haben könnte berechnete Stilelemente, die nicht durch einen eigenen Stil definiert sind.
Das hat mich verrückt gemacht - ich habe mich gefragt, wo meine <p> -Elemente zusätzliche 16px Randhöhe bekommen - bis ich merkte, dass es aus dem berechneten Stil kommt.
window.getComputedStyle( element, null ) erhalten sollten, was ein CSSStyleDeclaration -Objekt zurückgibt (wie element.style ). element.offsetHeight / element.clientHeight sollte dir die Höhe ohne Ränder geben, also sieht die ganze Sache wie folgt aus:
%Vor%
Wenn Sie den äußeren Teil auf Stil display : inline-block; setzen können, dann enthält scrollHeight die Ränder der untergeordneten Elemente.
Es funktioniert auch, wenn Sie den Stil display : flex; (unterstützt von IE 9 +) festlegen
Diese Antwort mag ein wenig offensichtlich sein, aber wenn Sie den Rand bereits kennen, warum fügen Sie ihn nicht einfach manuell zur Höhe hinzu?
Tags und Links javascript html css