Atribut offsetHeight HTML DOM Element

Definisi dan penggunaan

offsetHeight Atribut mengembalikan tinggi visual elemen (dalam piksel), termasuk padding, border, dan scrollbar, tetapi tanpa margin.

offsetHeight Atribut hanya baca.

Lihat pula:Tutorial Model Bok CSS

offsetParent

Semua elemen blok melaporkan offset relatif terhadap parent offset:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Parent offset adalah leluhur terdekat yang memiliki posisi non statis.

Jika tidak ada parent offset, offset adalah relatif terhadap teks utama dokumen.

Lihat pula:

Atribut offsetWidth

Atribut offsetParent

Atribut offsetTop

Atribut offsetLeft

Atribut clientTop

Atribut clientLeft

Atribut clientWidth

Atribut clientHeight

Contoh

Contoh 1

Tampilkan tinggi dan lebar "myDIV", termasuk padding dan border:

const elmnt = document.getElementById("myDIV");
let text = "Tinggi dengan padding dan border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

Coba Sendiri

Contoh 2

Perbedaan antara clientHeight/clientWidth dan offsetHeight/offsetWidth

Dengan scrollbar:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

Coba Sendiri

Tanpa scrollbar:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

Coba Sendiri

Sintaks

element.offsetHeight

Nilai Kembalian

Tipe Deskripsi
Angka Ketinggian yang dapat dilihat elemen (dinyatakan dalam piksel), termasuk margin internal, garis dan scrollbar.

Dukungan Peramban

Semua peramban mendukung element.offsetHeight:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan Dukungan