En son web geliştirme öğreticiler
 

HTML DOM clientHeight Propery

<Eleman Nesne

Örnek

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

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";

Txt sonucu olacaktır:

Height with padding: 270px
Width with padding: 420px
Kendin dene "

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

Tanımı ve Kullanımı

clientHeight mülkiyet görüntülenebilir dolgu dahil piksel olarak bir elementin, yüksekliğini, ancak sınır, kaydırma veya 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 clientWidth özelliği.

İpucu: kullan offsetHeight ve offsetWidth dolgu, sınır ve kaydırma dahil bir unsuru, görüntülenebilir yüksekliğini ve genişliğini dönmek özelliklerini.

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

Bu özellik salt okunur.

Tarayıcı Desteği

özellik
clientHeight Evet Evet Evet Evet Evet

Sözdizimi

element .clientHeight

Teknik detaylar

Geri dönüş değeri: dolgu 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