Come posso recuperare la larghezza e l’altezza effettive di un elemento HTML?

Supponiamo di avere un

che desidero centrare nel display del browser (viewport). Per fare ciò, ho bisogno di calcolare la larghezza e l’altezza dell’elemento

.

Cosa dovrei usare? Si prega di includere informazioni sulla compatibilità del browser.

È necessario utilizzare le proprietà .offsetWidth e .offsetHeight . Nota che appartengono all’elemento, non .style .

var width = document.getElementById('foo').offsetWidth;

Dai un’occhiata a Element.getBoundingClientRect() .

Questo metodo restituirà un object contenente la width , l’ height e alcuni altri valori utili:

 { width: 960, height: 71, top: 603, bottom: 674, left: 360, right: 1320 } 

Per esempio:

 var element = document.getElementById('foo'); var positionInfo = element.getBoundingClientRect(); var height = positionInfo.height; var width = positionInfo.width; 

Credo che questo non abbia i problemi che .offsetWidth e .offsetHeight fanno dove a volte restituiscono 0 (come discusso nei commenti qui )

Un’altra differenza è getBoundingClientRect() potrebbe restituire pixel frazionari, dove .offsetWidth e .offsetHeight arriveranno al numero intero più vicino.

Nota IE8 : getBoundingClientRect non restituisce altezza e larghezza su IE8 e sotto. *

Se è necessario supportare IE8, utilizzare .offsetWidth e .offsetHeight :

 var height = element.offsetHeight; var width = element.offsetWidth; 

Vale la pena notare che l’object restituito da questo metodo non è in realtà un object normale . Le sue proprietà non sono enumerabili (quindi, ad esempio, Object.keys non funziona Object.keys ).

Maggiori informazioni su questo qui: Il modo migliore per convertire un ClientRect / DomRect in un object semplice

Riferimento:

NOTA : questa risposta è stata scritta nel 2008. All’epoca la migliore soluzione cross-browser per la maggior parte delle persone era l’uso di jQuery. Lascio la risposta qui per i posteri e, se stai usando jQuery, questo è un buon modo per farlo. Se stai usando qualche altro framework o puro JavaScript, la risposta accettata è probabilmente la strada da percorrere.

A partire da jQuery 1.2.6 è ansible utilizzare una delle funzioni CSS principali, height e width (o outerHeight e outerWidth , a seconda dei casi).

 var height = $("#myDiv").height(); var width = $("#myDiv").width(); var docHeight = $(document).height(); var docWidth = $(document).width(); 

Nel caso sia utile a chiunque, metto una casella di testo, un pulsante e div tutto con lo stesso css:

 width:200px; height:20px; border:solid 1px #000; padding:2px;   

L’ho provato in chrome, firefox e ie-edge, ho provato con jquery e senza, e l’ho provato con e senza il box-sizing:border-box . Sempre con < !DOCTYPE html>

I risultati:

  Firefox Chrome IE-Edge with w/o with w/o with w/o box-sizing $("#t").width() 194 200 194 200 194 200 $("#b").width() 194 194 194 194 194 194 $("#d").width() 194 200 194 200 194 200 $("#t").outerWidth() 200 206 200 206 200 206 $("#b").outerWidth() 200 200 200 200 200 200 $("#d").outerWidth() 200 206 200 206 200 206 $("#t").innerWidth() 198 204 198 204 198 204 $("#b").innerWidth() 198 198 198 198 198 198 $("#d").innerWidth() 198 204 198 204 198 204 $("#t").css('width') 200px 200px 200px 200px 200px 200px $("#b").css('width') 200px 200px 200px 200px 200px 200px $("#d").css('width') 200px 200px 200px 200px 200px 200px $("#t").css('border-left-width') 1px 1px 1px 1px 1px 1px $("#b").css('border-left-width') 1px 1px 1px 1px 1px 1px $("#d").css('border-left-width') 1px 1px 1px 1px 1px 1px $("#t").css('padding-left') 2px 2px 2px 2px 2px 2px $("#b").css('padding-left') 2px 2px 2px 2px 2px 2px $("#d").css('padding-left') 2px 2px 2px 2px 2px 2px document.getElementById("t").getBoundingClientRect().width 200 206 200 206 200 206 document.getElementById("b").getBoundingClientRect().width 200 200 200 200 200 200 document.getElementById("d").getBoundingClientRect().width 200 206 200 206 200 206 document.getElementById("t").offsetWidth 200 206 200 206 200 206 document.getElementById("b").offsetWidth 200 200 200 200 200 200 document.getElementById("d").offsetWidth 200 206 200 206 200 206 

Devi solo calcolarlo per IE7 e versioni precedenti (e solo se il tuo contenuto non ha dimensioni fisse). Suggerisco di utilizzare i commenti condizionali HTML per limitare l’hacking ai vecchi IE che non supportano i CSS2. Per tutti gli altri browser usa questo:

  
test
test

Questa è la soluzione perfetta. Centra

di qualsiasi dimensione, e si restringe a seconda del suo contenuto.

Secondo MDN: Determinazione delle dimensioni degli elementi

offsetWidth e offsetHeight restituiscono “la quantità totale di spazio offsetHeight da un elemento, inclusa la larghezza del contenuto visibile, le barre di scorrimento (se presenti), il riempimento e il bordo”

clientWidth e clientHeight restituiscono “quanto spazio occupa il contenuto visualizzato effettivo, incluso il padding ma non include il bordo, i margini o le barre di scorrimento”

scrollWidth e scrollHeight restituiscono “la dimensione effettiva del contenuto, indipendentemente da quanto è attualmente visibile”

Quindi, dipende dal fatto che il contenuto misurato sia previsto al di fuori dell’area attualmente visualizzabile.

element.offsetWidth e element.offsetHeight dovrebbe fare, come suggerito nel post precedente.

Tuttavia, se vuoi solo centrare il contenuto, c’è un modo migliore per farlo. Supponendo di usare xhtml strict DOCTYPE. imposta il margine: 0, proprietà auto e larghezza richiesta in px al tag body. Il contenuto diventa allineato al centro della pagina.

… sembra che i CSS aiutino a mettere div al centro …

  
... so you hav div 200px*100px on center ...

inoltre puoi usare questo codice:

 var divID = document.getElementById("divid"); var h = divID.style.pixelHeight; 

È facile modificare gli stili degli elementi, ma è piuttosto complicato leggere il valore.

JavaScript non può leggere nessuna proprietà di stile di elemento (elem.style) proveniente da css (interno / esterno) a meno che non si utilizzi il metodo incorporato chiamata getComputedStyle in javascript.

getComputedStyle (elemento [, pseudo])

Elemento: l’elemento per leggere il valore per.
pseudo: uno pseudo-elemento se richiesto, ad esempio :: before. Una stringa vuota o nessun argomento indica l’elemento stesso.

Il risultato è un object con proprietà di stile, come elem.style, ma ora rispetto a tutte le classi CSS.

Ad esempio, qui lo stile non vede il margine:

       

Così modificato il tuo codice javaScript per includere getComputedStyle dell’elemento a cui desideri ottenere larghezza / altezza o altro attributo

 window.onload = function() { var test = document.getElementById("test"); test.addEventListener("click", select); function select(e) { var elementID = e.target.id; var element = document.getElementById(elementID); let computedStyle = getComputedStyle(element); var width = computedStyle.width; console.log(element); console.log(width); } } 

Valori calcolati e risolti

Ci sono due concetti in CSS:

Un valore di stile calcolato è il valore dopo che tutte le regole CSS e l’ereditarietà CSS sono state applicate, come risultato della cascata CSS. Può sembrare altezza: 1em o dimensione carattere: 125%.

Un valore di stile risolto è quello finalmente applicato all’elemento. Valori come 1em o 125% sono relativi. Il browser prende il valore calcolato e rende tutte le unità fisse e assolute, ad esempio: height: 20px o font-size: 16px. Per le proprietà della geometria i valori risolti possono avere un punto mobile, come larghezza: 50.5 px.

Molto tempo fa getComputedStyle è stato creato per ottenere valori calcolati, ma si è scoperto che i valori risolti sono molto più convenienti e lo standard è cambiato.
Quindi oggigiorno getComputedStyle restituisce effettivamente il valore risolto della proprietà.

Notare che:

getComputedStyle richiede il nome completo della proprietà

Dovresti sempre chiedere la proprietà esatta che desideri, come paddingLeft o height o width. Altrimenti il ​​risultato corretto non è garantito.

Ad esempio, se ci sono proprietà paddingLeft / paddingTop, cosa dovremmo ottenere per getComputedStyle (elem) .padding? Niente, o forse un valore “generato” da noti paddings? Non c’è una regola standard qui.

Ci sono altre incongruenze. Ad esempio, alcuni browser (Chrome) mostrano 10px nel documento sottostante e alcuni di essi (Firefox) – no:

   

per maggiori informazioni https://javascript.info/styles-and-classs

Ecco il codice per WKWebView che determina l’altezza dell’elemento Dom specifico (non funziona correttamente per l’intera pagina)

 let html = "\(textValue)" webView.navigationDelegate = self webView.loadHTMLString(taskHTML, baseURL: nil) func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { webView.evaluateJavaScript("document.getElementById(\"spanEl\").getBoundingClientRect().height;") { [weak self] (response, error) in if let nValue = response as? NSNumber { } } } 

Se offsetWidth restituisce 0, è ansible ottenere la proprietà della larghezza dello stile dell’elemento e cercarla per un numero. “100px” -> 100

/\d*/.exec(MyElement.style.width)