Apakah itu HTML DOM Element offsetTop Property dalam JavaScript

Apakah Itu Html Dom Element Offsettop Property Dalam Javascript



Elemen HTML DOM “ offsetTop sifat ” menilai kedudukan teratas elemen HTML yang ditentukan sepadan dengan dokumen. Ia ialah sifat baca sahaja DOM HTML khas yang selalunya boleh digunakan dengan sifat mengimbangi JavaScript lain.

Tulisan ini menghuraikan cara kerja sifat 'offsetTop' dalam JavaScript.

Bagaimanakah Harta 'offsetTop' HTML DOM Berfungsi dalam JavaScript?

' offsetTop sifat ” berfungsi pada elemen HTML dan mengembalikan “margin”, “padding” atas, “sempadan” dan “bar tatal” elemen induknya juga.





Sintaks



unsur. offsetTop

Dalam sintaks ini, ' unsur ” menandakan kedudukan teratas elemen HTML tertentu berbanding dengan port pandangan (kawasan kosong di mana kandungan halaman web dipaparkan).



Catatan: Nilai yang dikembalikan termasuk yang berikut:



  • kedudukan atas, dan margin elemen.
  • sempadan atas, bar skrol dan pelapik induk.

Mari gunakan sintaks di atas secara praktikal.

Contoh: Menggunakan Harta 'offsetTop' untuk Menilai Kedudukan Teratas HTML

Contoh ini menggunakan ' offsetTop ” harta untuk mengira kedudukan teratas elemen HTML tertentu iaitu, “

” termasuk marginnya dalam piksel.



Kod HTML

Pertama, pergi melalui kod HTML berikut:

< id div = 'Div1' gaya = 'top:20px; position: relative;margin:15px;border:3px solid blueviolet;text-align:center; padding:10px;' >

< b > Butiran tentang ini div ialah : b >< br >

atas : 20px < br >

kedudukan : relatif < br >

teks - selaraskan : pusat < br >

margin : 15px < br >

sempadan : 3px < br >

div >< br >

< butang onclick = 'jsFunc()' > Klik padanya butang >

< p id = 'untuk' > hlm >

Dalam kod di atas:

  • '
    elemen dicipta mempunyai id yang dinyatakan 'Div1' bersama ' gaya ” harta yang melakukan penggayaan yang dinyatakan.
  • Selepas itu, bahagian badan '
    ' menentukan maklumat yang dinyatakan.
  • Seterusnya, buat butang menggunakan ' teg ' mempunyai kaitan ' onclick ' acara untuk melaksanakan fungsi ' jsFunc() ” apabila butang klik.
  • Akhir sekali, tambah perenggan kosong melalui '

    teg ” untuk memaparkan kedudukan teratas yang dikira bagi elemen “

    ”.

Kod JavaScript

Sekarang, pertimbangkan kod JavaScript yang diberikan:

< skrip >

fungsi jsFunc ( ) {

adalah elmnt = dokumen. getElementById ( 'Div1' ) ;

di mana txt = 'OffsetTop yang dikira ialah: ' + elmnt. offsetTop + 'px
' ;

dokumen. getElementById ( 'untuk' ) . innerHTML = txt ;

}

skrip >

Dalam baris kod di atas:

  • Fungsi ini ditakrifkan bernama ' jsFunc() ”.
  • Dalam definisinya, pembolehubah ' elmnt ” diisytiharkan dengan “ adalah ” kata kunci yang menggunakan “ getElementById() kaedah untuk mengakses 'div' yang disertakan dengan idnya ' Div1 ”.
  • Selepas itu, gunakan ' offsetTop sifat ” dalam pembolehubah “txt” untuk mengira kedudukan teratas “div” yang diambil dalam piksel.
  • Akhir sekali, 'getElementById()' digunakan sekali lagi untuk mendekati perenggan kosong yang ditambah dan menambah nilai kedudukan teratas yang dikira bagi elemen '
    ' dalam perenggan melalui ' innerHTML ” harta benda.

Pengeluaran

Dalam hasil ini, dapat diperhatikan bahawa kedudukan teratas div yang diberikan (termasuk margin), iaitu, ' 35px ” dikira mengikut nota yang ditentukan (pada permulaan blog) dan dipaparkan pada butang klik.

Kesimpulan

JavaScript menyediakan ' offsetTop ” harta untuk mengira kedudukan teratas elemen HTML berbanding dengan viewport. Ia mengembalikan kedudukan teratas yang dikira unsur sebagai nilai integer dalam “ piksel ”. Tulisan ini menunjukkan objektif, penggunaan dan pelaksanaan sifat 'offsetTop' Elemen HTML DOM dalam JavaScript.

Lain-lain

Kategori

Jawatan Popular

Guru asal Git

Komputer Riba Berhibernasi Semasa Bermain Permainan – Cara Membaikinya

Apakah db.collection.count() dalam MongoDB?

Bagaimana untuk Melumpuhkan Benang pada Mudah Alih Discord?

Apakah itu Arduino Starter Kit Multi-Bahasa

Bagaimana untuk Memasang Windows 10 (Mesin Maya) dalam VirtualBox?

Apakah Transformasi Bintang-Delta

Bagaimana untuk Memasang Windows pada Komputer Riba Selepas Menggantikan Pemacu Keras?

Bagaimana untuk Memaparkan Nilai Pembolehubah dalam MATLAB Menggunakan Fungsi disp()?

Bagaimanakah Kaedah 'Pemadaman Rawak' Berfungsi Dalam PyTorch?

Gelung PL/SQL

Kaedah Numpy Fromstring

Bagaimanakah Saya Menggunakan Fungsi CONCAT() dalam MySQL?

Cara Menggunakan Perakam Skrin Ubuntu

Mengapa Saya Tidak Boleh Menyukai Mesej Teks pada Android

Cara Semak dan Nyahtanda Semua Kotak Semak Menggunakan JavaScript

Penapisan Tarikh SQL

Cara Merekabentuk Litar Keratan Diod dan Penggunting Diod

Lajur Pandas Insert().

Bagaimana untuk Mencipta dan Menggunakan Perkhidmatan ECS dalam AWS?