clientWidth e clientHeight report zero mentre getBoundingClientRect è corretto

Question

In MDN's description of Element.clientWidth dice.

_{Nota: allora ho aggiornato MDN in base alle @potatopeelings risposta.}

La proprietà Element.clientWidth è la larghezza interna di un elemento in pixel. Include padding ma non la barra di scorrimento verticale (se presente, se renderizzata), bordo o margine.

Questa proprietà arrotonda il valore a un numero intero. Se hai bisogno di un valore frazionale, usa element.getBoundingClientRect().

Da questo ho capito che oltre arrotondamento clientWidth dovrebbe essere lo stesso di getBoundingClientRect().width.

Tuttavia vedo che per molti elementi (dove display è inline?) Il clientWidth (e altezza) sono pari a zero, mentre i valori restituiti da getBoundingClientRect sembrano corrette.

La ricerca su stackoverflow porta alcune risposte dicendo che questo accade prima che il documento sia in uno stato pronto ma lo vedo sempre, non solo quando la pagina si sta caricando.

Questo comportamento è coerente per tutti i browser che ho controllato, dove è specificato che questo dovrebbe essere il comportamento?

Esempio:

function str(name, width, height) { 
 
    return name + ': (' + width + ', ' + height + ')'; 
 
} 
 

 
function test() { 
 
    var s = document.getElementById('s'); 
 
    var rect = s.getBoundingClientRect(); 
 
    document.getElementById('out').innerHTML = 
 
    str('client', s.clientWidth, s.clientHeight) + '<br/>' + 
 
    str('bounding', rect.width, rect.height); 
 
}

<span id="s">A span</span><br/> <button onclick="test()">Test</button> 
 
<hr /> 
 
<div id="out"></div>

Answer 1

Dalla spec (http://www.w3.org/TR/cssom-view/#dom-element-clientwidth)

L'attributo clientWidth deve eseguire questi passaggi:

1.If l'elemento non ha associato Casella di layout CSS o se il layout CSS la casella è in linea, restituisce zero.
...

Answer 2

Il valore restituito da getBoundingClientRect() è un oggetto DOMRect che è l'unione dei rettangoli restituiti da getClientRects() per l'elemento; questo metodo considera la dimensione del riquadro di delimitazione anche se l'elemento è in linea (non ha il limite per gli elementi in linea che clientWidth ha - collegamenti alle specifiche @potatopeelings).

function str(name, width, height) { 
 
    return name + ': (' + width + ', ' + height + ')'; 
 
} 
 

 
function test() { 
 
    var s = document.getElementById('s'); 
 
    var rect = s.getBoundingClientRect(); 
 
    document.getElementById('out').innerHTML = 
 
    str('client', s.clientWidth, s.clientHeight) + '<br/>' + 
 
    str('bounding', rect.width, rect.height); 
 
}

#s{ 
 
    display: inline-block 
 
}

<span id="s">A span</span><br/> <button onclick="test()">Test</button> 
 
<hr /> 
 
<div id="out"></div>

controllo la differenza quando si modifica la proprietà display per inline-block o block.

Answer 3

Oltre a @ risposta di potatopeelings:

elementi in linea hanno dimensioni intrinseche o specificati. Per esempio. non è possibile definire una larghezza per span (a meno che non si cambi la proprietà display).

Anche clientWidth e getBoundingClientRect servono a scopi diversi e possono restituire valori diversi. Quest'ultimo considera anche le trasformazioni e restituisce le dimensioni di un elemento così com'è effettivamente rappresentato.

.class { 
    transform: scale(0.5); 
} 

Se clientWidth restituito 1000 in questo caso la larghezza di getBoundingClientRect sarebbe 500.

Si può considerare clientWidth come "la quantità di spazio devo disponibili all'interno dell'elemento" e getBoundingClientRect come "quanto lo spazio occupa l'elemento sullo schermo ". Quindi nel nostro caso l'elemento avrebbe spazio sufficiente per contenere due elementi 500px affiancati e occuperebbe 500px sullo schermo.