HTML DOM offsetWidth Ö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
offsetWidth özelliği, dolgu, kenarlık ve kaydırma çubuğu dahil olmak üzere bir öğenin görüntülenebilir genişliğ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 genişliğinden daha geniş olması durumunda, bu özelliğin yalnızca görünen genişliği döndürmesidir ("Diğer Örneklere Bakın").
Not: Bu özelliği anlamak için CSS Kutu Modelini anlamalısınız .
İpucu: Bu özellik genellikle offsetHeight ö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 | |||||
---|---|---|---|---|---|
offsetWidth | Yes | Yes | Yes | Yes | Yes |
Sözdizimi
element.offsetWidth
Teknik detaylar
Geri dönüş değeri: | Dolgu, kenarlık ve kaydırma çubuğu dahil piksel cinsinden bir öğenin görüntülenebilir genişliğ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";