Misura larghezza e altezza dell'elemento Html in Dart

Question

Vorrei conoscere le dimensioni esatte di un elemento senza margine, bordo e spaziatura, solo la larghezza e l'altezza del riquadro più interno (vedi immagine sotto).

Attualmente sono a conoscenza della funzione "getBoundingClientRect" che fornisce le dimensioni tra cui bordo e riempimento. C'è anche la proprietà "client" che restituisce un Rect che include il padding.

Quindi la domanda è: come ottengo la larghezza e l'altezza senza padding?

Answer 1

Purtroppo il DOM non fornisce tale funzionalità. Ecco perché molte librerie come jQuery, ExtJS, ecc. Forniscono metodi di supporto. Sono essenzialmente parse the style e capirlo.

Ecco un esempio:

<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); 
} 

E l'utilizzo:

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

Risultato:

100 

Note:

• Si potrebbe considerare di gestire diversi tipi di unità (px, pt, em, ...).
• La proprietà box-sizing ha anche un effetto che si potrebbe voler controllare.

Se io o lei capita di trovare il tempo, forse rilascia un pacchetto Pub o qualcosa del genere. :)

Answer 2

Questo pacchetto pub può prevedere la dimensione di un testo (senza margine, border e padding) che ancora non esiste nel DOM: https://pub.dartlang.org/packages/textent

Answer 3

provare la recente introduzione relativamente Element.contentEdge, che sembra sii esattamente quello che vuoi

This un commento da un dipendente di Google elenca alcuni altri metodi correlati che sono stati aggiunti. Notare che almeno alcuni di essi sono ancora contrassegnati come Experimental nei documenti API, ma possono essere comunque utili.