Measure Breite und Höhe des HTML-Elements in Dart

Question

Ich mag würde die genaue Größe eines Element ohne Rand, Grenz- und Klotzen, nur die Breite und die Höhe des innersten Feldes bekannt sein (siehe Bild unten).

Derzeit bin ich bewusst die Funktion „getBoundingClientRect“, die die Größe einschließlich Grenze und Polsterung gibt. Es gibt auch die Eigenschaft "client", die ein Rect mit dem Padding zurückgibt.

Die Frage ist also, wie bekomme ich die Breite und Höhe ohne Polster?

Answer 1

Leider ist der DOM verfügt nicht über diese Funktionalität. Aus diesem Grund bieten die meisten Bibliotheken wie jQuery, ExtJS usw. Hilfsmethoden. Sie im Wesentlichen parse the style und finde es heraus.

Hier ist ein Beispiel:

<div style="width: 100px; height: 100px; padding: 5px; border: 1px solid #000"></div> 

int getWidth(Element element) { 
    var paddingLeft = element.style.paddingLeft.replaceAll('px', ''); // You may want to deal with different units. 
    var paddingRight = element.style.paddingLeft.replaceAll('px', ''); 

    return element.clientWidth - int.parse(paddingLeft) - int.parse(paddingRight); 
} 

Und die Nutzung:

print(getWidth(query('#test'))); 

Ergebnis:

100 

Hinweise:

• Sie sich anschauen sollten mit verschiedenen Arten von Einheiten (px, pt, em, ...) zu tun.
• Die box-sizing Eigenschaft hat auch einen Effekt Sie vielleicht zu prüfen.

Wenn ich oder Sie zufällig die Zeit finden, vielleicht veröffentlichen ein Pub-Paket oder etwas. :)

Answer 2

Dieses Pub Paket kann vorhersagen, die Größe eines Text (ohne Rand, Grenze und Polsterung), die noch nicht in dem DOM vorhanden: https://pub.dartlang.org/packages/textent

Answer 3

die relativ Versuchen kürzlich Element.contentEdge eingeführt, das scheint sei genau was du willst.

This Kommentar von einem Google-Mitarbeiter sind einige ähnliche Methoden, die auch hinzugefügt wurde. Beachten Sie, dass mindestens einige von ihnen noch als Experimental in den API-Dokumenten markiert sind, aber sie können dennoch nützlich sein.