En son web geliştirme öğreticiler
 

HTML DOM offsetHeight Propery

<Eleman Nesne

Örnek

Yükseklik ve bir genişliğini alın <div> dolgu ve sınırın dahil elemanı,:

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";

Txt sonucu olacaktır:

Height with padding and border: 280px
Width with padding and border: 430px
Kendin dene "

Daha "Try it Yourself" Aşağıdaki örnekler.

Tanımı ve Kullanımı

offsetHeight mülkiyet görüntülenebilir dolgu, sınır ve kaydırma dahil piksel, bir elementin yüksekliğini değil, marj döndürür.

Nedeni "viewable" elemanın içeriği elemanının gerçek yüksekliğinden daha yüksek olan, yalnızca görünür yükseklik dönecektir bu özellik nedeniyle kelimesi belirtilirse, bir (See "More Examples") .

Not: Bu özelliği anlamak için, anlamalısınız CSS Kutu Modeli .

Öneri: Bu özellik genelde birlikte kullanılır offsetWidth özelliği.

Ipucu: clientHeight ve clientWidth sadece dolgu içeren bir elemanın görüntülenebilir yüksekliğini ve genişliğini dönüş özellikleri.

İpucu: bir öğeye kaydırma çubukları eklemek CSS kullanmak için taşma özelliği.

Bu özellik salt okunur.

Tarayıcı Desteği

özellik
offsetHeight Evet Evet Evet Evet Evet

Sözdizimi

element .offsetHeight

Teknik detaylar

Geri dönüş değeri: dolgu, sınır ve bir kaydırma çubuğu içeren piksel bir elemanın görüntülenebilir yüksekliğini temsil eden bir sayı,
Örnekler

Diğer Örnekler

Ö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";

Txt sonucu olacaktır:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Kendin dene "

Örnek

Biz elemana bir kaydırma çubuğu eklediğinizde 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, 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";

Txt sonucu olacaktır:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Kendin dene "

<Eleman Nesne