En son web geliştirme öğreticiler
 

HTML DOM clientWidth 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ı

clientWidth özelliği görüntülenebilir dolgu içeren piksel olarak bir element, genişliği, ancak sınır, kaydırma ya da kenar döndürür.

Nedeni "viewable" elemanın içeriği elemanının fiili genişliğinden daha geniş olması durumunda, sadece görünür genişliği 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 clientHeight ö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
clientWidth Evet Evet Evet Evet Evet

Sözdizimi

element .clientWidth

Teknik detaylar

Geri dönüş değeri: dolgu içeren piksel bir elemanın görüntülenebilir genişliğ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