clientWidth和clientHeight報告爲零，而getBoundingClientRect正確

在MDN的description of Element.clientWidth它說。clientWidth和clientHeight報告爲零，而getBoundingClientRect正確

_{注：我因爲更新MDN已經根據@potatopeelings答案。}

的Element.clientWidth屬性是像素的元件的內部寬度。它包括填充，但不包括垂直滾動條（如果存在，如果呈現），邊框或邊距。

該屬性將四捨五入爲整數。如果您需要小數值，請使用element.getBoundingClientRect（）。

從這個我明白，不是四捨五入clientWidth應該是一樣getBoundingClientRect().width等。

不過，我看到了許多元素（其中display是inline？）的clientWidth（和高度）爲零，而由getBoundingClientRect返回的值似乎是正確的。

搜索計算器上帶來了一些答案，說這發生之前的原稿爲準備狀態，但我看到這一切的時候，不只是當頁面正在加載。

此行爲對於我檢查過的所有瀏覽器都是一致的，它在哪裏指定這應該是行爲？

樣品：

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>

來源

2015-09-07 Motti

從規範（http://www.w3.org/TR/cssom-view/#dom-element-clientwidth）

的clientWidth屬性必須執行這些步驟：1.如果元件沒有關聯

CSS佈局框或CSS佈局框在線，返回零。
...

來源

2015-09-07 12:35:21 potatopeelings

這就是它！你有什麼想法，爲什麼這是？ – Motti

我相信它已經像在規範，因爲很長一段時間 - 我能找到的最早的參考是https://lists.w3.org/Archives/Public/www-style/2008Mar/0060.html（2008年），但是我敢肯定如果你使用瀏覽器特定的話會有更老的引用，甚至更老的引用。 – potatopeelings

謝謝，我已經更新了MDN。 – Motti

從getBoundingClientRect（返回值）是一個DOMRect對象，它是由getClientRects（）的元件返回的矩形的並集;此方法查看邊界框的維度，即使元素是內聯的（它沒有內聯元素的限制clientWidth具有 - specs @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>

要檢查你的顯示屬性更改爲inline-block或block的差異。

來源

2015-09-07 12:44:16 maioman

除了@ potatopeelings的回答：

內聯元素沒有內在或指定的維度。例如。你不能爲span定義的寬度（除非你改變它的display屬性）。

而且clientWidth和getBoundingClientRect用於不同的目的，可能會返回不同的值。後者也考慮轉換並返回實際呈現的元素的維度。

.class { 
    transform: scale(0.5); 
}

如果clientWidth在這種情況下，返回1000則getBoundingClientRect寬度是500

。你可以把clientWidth爲「多少空間我有在元素中可用」和getBoundingClientRect爲「多少元素佔據屏幕上的空間「。因此，在我們的情況下，該元素將有足夠的空間容納兩個並列500px的元素側，它會在屏幕上佔據500像素。

來源

2015-09-07 14:06:39 zeroflagL

CSS住在語義混亂的海洋，所以謝謝你澄清他們如何感知這兩個屬性。 – aaaaaa

clientWidth和clientHeight報告爲零，而getBoundingClientRect正確

回答

相關問題