ofset Yüksekliği JavaScript programlama dili tarafından kullanılan bir HTML DOM özelliğidir. Görünür içeriğin, kenarlığın, dolgunun ve varsa kaydırma çubuğunun yüksekliğini içeren bir öğenin görünür yüksekliğini piksel cinsinden döndürür. offsetHeight genellikle offsetWidth özelliğiyle birlikte kullanılır. ofsetGenişlik HTML DOM'un offsetHeight ile hemen hemen aynı olan başka bir özelliğidir. Bu özellikler, JavaScript tarafından HTML öğelerinin görünür yüksekliğini ve genişliğini bulmak için kullanılır.
offsetHeight aşağıdaki HTML öğelerinin birleşimidir:
offsetHeight = height + border + padding + horizontal scrollbar
Öte yandan offsetWidth aşağıdaki öğeleri içerir:
offsetWidth = width + border + padding + vertical scrollbar
offsetHeight ve offsetWidth öğelerinin kenar boşluğunu (ne üst kenar boşluğu ne de alt kenar boşluğu) içermediğini unutmayın. Bu DOM özellikleri şu kişiler tarafından kullanılır: JavaScript programlama dili HTML öğelerinin boyutunu piksel cinsinden hesaplamak için.
Linux'ta betik nasıl çalıştırılır
Aşağıdaki diyagramın yardımıyla offsetHeight ve offsetWidth'i çok daha iyi anlayabilirsiniz:
Tarayıcı desteği
offsetHeight DOM özelliği, Chrome ve Internet Explorer gibi çeşitli web tarayıcıları tarafından desteklenir. Aşağıda offsetHeight ve offsetWidth özelliğini destekleyen bazı tarayıcılar bulunmaktadır.
| Tarayıcı |  Krom |  İnternet Explorer |  Firefox |  Opera |  Safari |  Kenar |
| ofsetYükseklik desteği | Evet | Evet | Evet | Evet | Evet | Evet |
Sözdizimi
Aşağıda offsetHeight'ın basit bir sözdizimi verilmiştir:
element.offsetHeight
Burada element, CSS özellik değerlerini veya HTML metin paragrafını tutmak için JavaScript'te oluşturulan bir değişkendir.
Dönüş Değerleri
offsetHeight ve offsetWidth, HTML öğelerinin hesaplanan yüksekliğini ve genişliğini sırasıyla piksel cinsinden döndürür.
Java tarihi güncel
Örnekler
Aşağıda bazı örneklerin bir listesi bulunmaktadır. Bunun yardımıyla offsetHeight özelliğinin nasıl kullanıldığını ve çalıştığını göreceğiz.
örnek 1
HTML DOM offsetHeight Property example #JTP { height: 120px; width: 250px; margin: 20px; padding: 15px; background-color: yellow; } function getInfo() { var eleValue = document.getElementById('JTP'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h2> HTML DOM offsetHeight Property example </h2> <b> A basic information about this div tab: </b> Submit Çıktı
Sarıyla vurgulanmış renkte bir paragraf ve bir gönder düğmesi içeren aşağıdaki çıktıya bakın. Buna tıklayın Göndermek düğmesine basın ve bu paragrafın offsetHeight değerini hesaplayın.
Gönder düğmesine tıklamadan önce çıktı alın
Gönder düğmesine tıkladıktan sonra çıktı alın
Hesaplanan offsetHeight, sarıyla vurgulanan bu alanın içinde görüntülenecektir.
Örnek 2
Bu örnekte, bu örnekte sağlanan bir paragrafın offsetHeight değerini CSS stiliyle birlikte hesaplayacağız. offsetHeight'ın marj içermeyeceğini unutmayın.
Linux'ta dosya sistemi
HTML DOM offsetHeight Property example #PStyle { height: 220px; width: 320px; margin: 20px; padding: 15px; background-color: pink; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 2 </h3> <p> In this example, we will calculate the offset height for this paragraph. We have also provided CSS styling to this paragraph. This offsetHeight will include the height of text, padding, border except margin taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight Çıktı
Pembe vurgulanmış renkte bir paragraf ve bir gönder düğmesi içeren aşağıdaki çıktıya bakın. Buna tıklayın OffsetHeight'ı hesapla düğmesine basın ve bu paragrafın offsetHeight değerini hesaplayın.
Ofset Yüksekliğini Hesapla düğmesine tıklamadan önce çıktı alın
Ofset Yüksekliğini Hesapla düğmesine tıkladıktan sonra çıktı
Hesaplanan offsetHeight bu pembe vurgulu alanın içinde görüntülenecektir. Aşağıdaki ekran görüntüsünde verilen paragraf için offsetHeight değerinin 230 piksel olduğunu görebilirsiniz.
Örnek 3 CSS stili olmadan
OffsetHeight'ı hesaplamaya ilişkin başka bir örneğe bakın. Yükseklik, genişlik, kenar boşluğu, dolgu vb. gibi herhangi bir CSS stili eklemedik, arka plan rengini bekliyoruz. Yani paragraf, stil içermeyen basit bir paragraf olacaktır.
birden fazla tablodan sql seç
HTML DOM offsetHeight Property example #PStyle { background-color: orange; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements in paragraph calculated as pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 3 </h3> <p> In this example, we will calculate the offset height of this given paragraph. We have jusr included background color in CSS styling not height, width, margin, or padding to this paragraph. So, the offsetHeight will be calculted for the height of text taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight Çıktı
OffsetHeight'ı hesaplamak için turuncu renkte vurgulanmış bir paragraf ve bir gönder düğmesi içeren aşağıdaki çıktıya bakın. Buna tıklayın OffsetHeight'ı hesapla düğmesine basın ve bu paragrafın offsetHeight değerini hesaplayın.
Ofset Yüksekliğini Hesapla düğmesine tıklamadan önce
Ofset Yüksekliğini Hesapla düğmesine tıkladıktan sonra
Aşağıdaki ekran görüntüsünde verilen paragraf için offsetHeight değerinin 88 piksel olduğunu görebilirsiniz.
Hem offsetHeight hem de offsetWidth'i hesaplayın
Bu örnekte her ikisini de hesaplayacağız. ofset Yüksekliği Ve ofsetGenişlik div sekmesindeki bir paragraf için. Böylece ne kadar farklı hesapladıklarını anlayabilirsiniz. Burada CSS kullanacağız ve bu örnekte stillendirme için yükseklik, genişlik, kenar boşluğu, dolgu vb. değerleri geçeceğiz.
Daha iyi anlamak için aşağıdaki kodu sisteminize kopyalayıp çalıştırın.
HTML DOM offsetHeight Property example #PStyle { height: 180px; width: 400px; margin: 20px; padding: 15px; background-color: lightblue; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt1 = 'OffsetHeight of the paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; var txt2 = 'OffsetWidth of the paragraph along with padding and border in pixels is: ' + eleValue.offsetWidth + 'px'; document.getElementById('sudo1').innerHTML = txt1; document.getElementById('sudo2').innerHTML = txt2; } <h2> Calculation of offsetHeight and offsetWidth </h2> <b> A basic information about this div tab: </b> Submit Çıktı
Açık maviyle vurgulanan renkli alanda bir paragraf ve bir gönder düğmesi içeren aşağıdaki çıktıya bakın. Buna tıklayın Göndermek düğmesine basın ve bu paragrafın offsetHeight ve offsetWidth değerlerini hesaplayın.
Gönder düğmesine tıklamadan önce çıktı alın
html'den javascript işlevini çağırın
Üzerine tıkladıktan sonra Göndermek düğmesi, hesaplanan offsetHeight 210 pikseldir ve offsetWidth bu açık maviyle vurgulanan alanın içinde görüntülenen 430 pikseldir. Aşağıdaki çıktıya bakın.
Gönder düğmesine tıkladıktan sonra çıktı alın
Farklı hesaplama parametrelerine sahip birkaç örnek gördünüz. Bu çeşitli örneklerde, metin paragrafını CSS stiliyle veya CSS stili olmadan aktardık ve ardından offsetHeight ve offsetWidth değerlerini ayrı ayrı hesapladık.