offsetHeight ve clientHeight arasındaki fark

154

Javascript dom - bir öğenin offsetHeight ve clientHeight arasındaki fark nedir?

javascript

— steve
kaynak

İşte iyi bir demo örneği jsfiddle.net/shibualexis/yVhgM/3

— GibboK

Yanıtlar:

203

clientHeight :

Bir nesnenin görünür alanının yüksekliğini piksel cinsinden döndürür. Değer, dolgu ile yüksekliği içerir, ancak scrollBar, kenarlık ve kenar boşluğunu içermez.

ofsetHeight :

Bir nesnenin görünür alanının yüksekliğini piksel cinsinden döndürür. Değer, dolgu, scrollBar ve kenarlık içeren yüksekliği içerir, ancak kenar boşluğunu içermez.

Yani offsetHeightkaydırma çubuğu ve kenarlık içerir, clientHeightiçermez.

— Oded
kaynak

Fark ettiğim başka bir şey, clientHeight'ın ofsetHeight'tan çok daha hızlı olmasıdır. neden olduğu hakkında bir fikrin var mı?

— disc0dancer

@ disc0dancer - Muhtemelen tarayıcı zaten clientSizehazır olduğundan (sonuçta, bu görünüm penceresi), ancak offsetHeighttüm belgeyi yeniden reddettikten sonra hesaplanması gerekiyor mu?

— Oded

Webkit denetçisi, clientHeigh için sorulduğunda bile yeniden akışların tüm belgede olduğunu söylüyor.

— disc0dancer

@ disc0dancer - Tahminim için çok fazla. Ancak bu bir uygulama şeyidir - tüm tarayıcıların böyle olduğundan emin değilim.

— Oded

Oded'in cevabı teoridir. Ancak teori ve gerçeklik her zaman aynı değildir, en azından Javascript'teki kaydırma işlemleri için önemli olabilecek <BODY> veya <HTML> öğeleri için değildir.

Microsoft, MSDN'de güzel bir görüntüye sahiptir :

ClientHeight, OffsetHeight, ScrollHeight

Dikey kaydırma çubuğunu gösteren bir HTML sayfanız varsa, <BODY> veya <HTML> öğesinin bu resimde gösterildiği gibi OffsetHeight değerinden bir ScrollHeight ısıtıcısına sahip olması beklenir. Bu, Internet Explorer'ın tüm eski sürümleri için geçerlidir.

Ancak Internet Explorer 11 için geçerli değildir ve Firefox 36 için geçerli değildir. En azından bu tarayıcılarda OffsetHeight, yanlış olan ScrollHeight ile hemen hemen aynıdır.

OffsetHeight yanlış olsa da, ClientHeight her zaman doğrudur.

Farklı tarayıcılarda aşağıdaki kodu deneyin, göreceksiniz:

<!DOCTYPE html>
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
    document.write("Body off: " + document.body.offsetHeight 
             + "<br>Body cli: " + document.body.clientHeight
             + "<br>Html off: " + document.body.parentElement.offsetHeight               
             + "<br>Html cli: " + document.body.parentElement.clientHeight);
</script>
</body>
</html>

Eski Internet Explorer doğru bir şekilde görünürken:

Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874

Firefox ve Internet Explorer 11 çıktıları:

Body off: 1260
Body cli: 1260
Html off: 1276   // this is completely wrong
Html cli: 889

bu da offsetHeight'ın yanlış olduğunu açıkça gösteriyor. OffsetHeight ve ClientHeight yalnızca birkaç piksel farklı olmalı veya aynı olmalıdır.

ClientHeight ve OffsetHeight'ın, örneğin <set> gibi görünmeyen öğeler için de çok farklı olabileceğini lütfen unutmayın; burada OffsetHeight, FORM'nin gerçek boyutu olabilirken ClientHeight sıfır olabilir.

— Elmue
kaynak