Properti offsetTop DOM Element HTML

Definisi dan penggunaan

OffsetTop Properti ini mengembalikan posisi atas untuk induk (dalam satuan piksel). Properti ini hanya dapat diakses.

Nilai kembalian termasuk:

  • Posisi atas dan margin elemen
  • PADDING ATAS induk, scrollbar dan border

Silakan lihat:Tutorial Model Bok CSS

offsetParent

Semua elemen blok melaporkan nilai offset untuk induk offset:

  • OffsetTop
  • OffsetLeft
  • OffsetWidth
  • OffsetHeight

Induk offset adalah nenek moyang yang paling dekat yang memiliki posisi yang bukan statis.

Jika tidak ada induk yang memiliki offset, nilai offset adalah untuk dokumen utama.

Silakan lihat:

OffsetLeft Properti

OffsetWidth Properti

OffsetHeight Properti

Atribut offsetParent

Atribut clientTop

Atribut clientLeft

Atribut clientWidth

Atribut clientHeight

Contoh

Contoh 1

Dapatkan posisi offsetTop "myDIV":

const element = document.getElementById("myDIV");
let pos = element.offsetTop;

Coba sendiri

Contoh 2

Dapatkan posisi "myDIV":

const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;

Coba sendiri

Contoh 3

Buat navigasi lepas kaki:

// Dapatkan navigasi
const navbar = document.getElementById("navbar");
// Dapatkan posisi offset navigasi
const sticky = navbar.offsetTop;
// Saat Anda mencapai posisi gerakan navigasi, tambahkan kelas sticky ke navigasi. Hapus kelas sticky saat meninggalkan posisi gerakan.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Coba sendiri

Sintaks

Kembalikan posisi atas top:

element.offsetTop

Nilai pengembalian

Tipe Deskripsi
Angka Lokasi atas elemen, dihitung dalam piksel.

Dukungan peramban

Semua peramban mendukung element.offsetTop:

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