HTML DOM offsetHeight Özellik
Örnek
Dolgu ve kenarlık dahil bir <div> öğesinin yüksekliğini ve genişliğini alın:
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
offsetHeight özelliği, dolgu, kenarlık ve kaydırma çubuğu dahil olmak üzere bir öğenin görüntülenebilir yüksekliğini piksel cinsinden döndürür, ancak kenar boşluğunu döndürmez.
"Görüntülenebilir" sözcüğün belirtilmesinin nedeni, öğenin içeriğinin öğenin gerçek yüksekliğinden daha uzun olması durumunda, bu özelliğin yalnızca görünen yüksekliği döndürmesidir ("Diğer Örnekler" bölümüne bakın).
Not: Bu özelliği anlamak için CSS Kutu Modelini anlamalısınız .
İpucu: Bu özellik genellikle offsetWidth özelliğiyle birlikte kullanılır .
İpucu: Bir öğenin yalnızca dolgu dahil görüntülenebilir yüksekliğini ve genişliğini döndürmek için clientHeight ve clientWidth özelliklerini kullanın .
İpucu: Bir öğeye kaydırma çubukları eklemek için CSS taşma özelliğini kullanın.
Bu özellik salt okunurdur.
Tarayıcı Desteği
| Property | |||||
|---|---|---|---|---|---|
| offsetHeight | Yes | Yes | Yes | Yes | Yes |
Sözdizimi
element.offsetHeight
Teknik detaylar
| Geri dönüş değeri: | Dolgu, kenarlık ve kaydırma çubuğu dahil piksel cinsinden bir öğenin görüntülenebilir yüksekliğini temsil eden bir Sayı |
|---|
Daha fazla örnek
Örnek
Bu örnek, clientHeight/clientWidth ve offsetHeight/offsetWidth arasındaki farkı gösterir:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Örnek
Bu örnek, öğeye bir kaydırma çubuğu eklediğimizde clientHeight/clientWidth ve offsetHeight/offsetWidth arasındaki farkı gösterir:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";