ResizeObserver derinlemesine
ResizeObserver ile öğe boyut değişimlerini ve content box size'i öğrenirsin.
ResizeObserver ve contentBoxSize
ResizeObserver bir öğenin boyut değişimlerini izler. Callback bir entries dizisi alır; her entry, izlenen öğenin yeni ölçülerini taşır. Temel kullanımda entry.contentRect genişlik ve yüksekliği verir.
Daha ayrıntılı bilgi için entry.contentBoxSize kullanırsın. Bu alan bir dizidir; her öğe inlineSize (yatay) ve blockSize (dikey) içerir. CSS Box Model'e uygun olarak içeriğin ölçüldüğü kutuyu verir; padding ve border dahil değildir.
borderBoxSize farkı
borderBoxSize ise padding ve border dahil tüm kutuyu ölçer. Yani contentBoxSize yalnızca içerik alanını, borderBoxSize öğenin görünen tüm alanını verir. Bu ayrım, CSS box-sizing ayarına göre değişen mizanpaj hesaplamalarında önemli olur.
Bazı tarayıcılarda devicePixelContentBoxSize da bulunur; bu, yüksek DPI ekranlarda fiziksel piksel cinsinden ölçü verir. Hangisini kullanacağına ihtiyacına göre karar verirsin.
Uygulama box öğesinin genişliğini izle
Bir ResizeObserver oluştur. Callback entries alır; her entry için entry.contentBoxSize[0].inlineSize değerini konsola yaz. box öğesini izle.
Örnek çözümü göster
1. new ResizeObserver((entries) => {...}) ile oluştur.
2. Callback içinde entries'i dolaş ve entry.contentBoxSize[0].inlineSize'ı yazdır.
3. observer.observe(box) ile başlat.
Örnek çözüm:
const observer = new ResizeObserver((entries) => {
for (const entry of entries) {
console.log(entry.contentBoxSize[0].inlineSize);
}
});
observer.observe(box);Kendini test et
-
observe çağrısı
observer.____(box);Cevabı göster
observer.observe(box); -
ResizeObserver'da contentBoxSize ile borderBoxSize arasındaki fark nedir?
- contentBoxSize padding dahil, borderBoxSize dahil değil
- İkisi tamamen aynıdır
- contentBoxSize içeriği, borderBoxSize padding ve border dahil tüm kutuyu ölçer
- borderBoxSize yalnızca genişliği verir
Cevabı göster
contentBoxSize içeriği, borderBoxSize padding ve border dahil tüm kutuyu ölçer — Doğru. contentBoxSize içerik alanını, borderBoxSize padding ve border dahil tüm kutuyu ölçer.
-
ResizeObserverSize alanlarını eşleştir
- inlineSize
- Yatay içerik ölçüsü
- blockSize
- Dikey içerik ölçüsü
- contentBoxSize
- İçerik kutusu
- borderBoxSize
- Kenarlık kutusu