Dalam proses pembuatan suatu halaman web, terkadang Anda perlu mengetahui secara pasti letak suatu elemen pada halaman web tersebut.
Tutorial berikut merangkum pengetahuan yang relevan tentang Javascript dalam penentuan posisi halaman web.
1. Ukuran halaman web dan ukuran jendela browser
Pertama, dua konsep dasar harus diklarifikasi.
Seluruh area halaman web adalah ukurannya. Biasanya, ukuran halaman web ditentukan oleh konten dan style sheet CSS.
Ukuran jendela browser mengacu pada luas halaman web yang terlihat di jendela browser, disebut juga viewport.
Jelasnya, jika konten halaman web dapat ditampilkan sepenuhnya di jendela browser (yaitu, tidak ada bilah gulir yang muncul), maka ukuran halaman web dan ukuran jendela browser adalah sama. Jika seluruh halaman tidak dapat ditampilkan, gulir jendela browser untuk menampilkan berbagai bagian halaman web.
2. Dapatkan ukuran halaman web
Setiap elemen di halaman web memiliki atribut clientHeight dan clientWidth. Kedua atribut ini mengacu pada area visual yang ditempati oleh bagian konten elemen ditambah padding, tidak termasuk ruang yang ditempati oleh border dan scroll bar.
(Gambar 1 properti clientHeight dan clientWidth)
Oleh karena itu, atribut clientHeight dan clientWidth dari elemen dokumen mewakili ukuran halaman web.
Copy kode kodenya sebagai berikut:
fungsi getViewport(){
if (document.compatMode == "BackCompat"){
kembali {
lebar: document.body.clientWidth,
tinggi: document.body.clientHeight
}
} kalau tidak {
kembali {
lebar: document.documentElement.clientWidth,
tinggi: document.documentElement.clientHeight
}
}
}
Fungsi getViewport di atas dapat mengembalikan tinggi dan lebar jendela browser. Saat menggunakannya, ada tiga hal yang perlu Anda perhatikan:
1) Fungsi ini harus dijalankan setelah halaman dimuat, jika tidak, objek dokumen belum dibuat dan browser akan melaporkan kesalahan.
2) Dalam kebanyakan kasus, document.documentElement.clientWidth mengembalikan nilai yang benar. Namun, dalam mode quirks IE6, document.body.clientWidth mengembalikan nilai yang benar, sehingga penilaian mode dokumen ditambahkan ke fungsi.
3) clientWidth dan clientHeight keduanya merupakan properti hanya-baca dan tidak dapat diberi nilai.
3. Cara lain untuk mendapatkan ukuran halaman web
Setiap elemen pada halaman web juga memiliki properti scrollHeight dan scrollWidth, yang mengacu pada area visual elemen termasuk scroll bar.
Kemudian, properti scrollHeight dan scrollWidth pada objek dokumen adalah ukuran halaman web, yang berarti keseluruhan panjang dan lebar scroll bar.
Mengikuti fungsi getViewport(), fungsi getPagearea() dapat ditulis.
Copy kode kodenya sebagai berikut:
fungsi getPagearea(){
if (document.compatMode == "BackCompat"){
kembali {
lebar: dokumen.body.scrollWidth,
tinggi: document.body.scrollHeight
}
} kalau tidak {
kembali {
lebar: document.documentElement.scrollWidth,
tinggi: document.documentElement.scrollHeight
}
}
}
Namun, ada masalah pada fungsi ini. Jika konten halaman web dapat ditampilkan sepenuhnya di jendela browser tanpa bilah gulir, maka lebar klien dan lebar gulir halaman web harus sama. Namun kenyataannya, browser yang berbeda memiliki metode pemrosesan yang berbeda, dan kedua nilai ini belum tentu sama. Oleh karena itu, kita perlu mengambil nilai yang lebih besar di antara nilai-nilai tersebut, jadi kita perlu menulis ulang fungsi getPagearea().
Copy kode kodenya sebagai berikut:
fungsi getPagearea(){
if (document.compatMode == "BackCompat"){
kembali {
lebar: Math.max(document.body.scrollWidth,
dokumen.body.clientWidth),
tinggi: Math.max(document.body.scrollHeight,
dokumen.body.clientHeight)
}
} kalau tidak {
kembali {
lebar: Math.max(document.documentElement.scrollWidth,
dokumen.documentElement.clientWidth),
tinggi: Math.max(document.documentElement.scrollHeight,
dokumen.documentElement.clientHeight)
}
}
}
4. Dapatkan posisi absolut elemen halaman web
Posisi absolut elemen halaman web mengacu pada koordinat sudut kiri atas elemen relatif terhadap sudut kiri atas keseluruhan halaman web. Posisi absolut ini dapat diperoleh melalui perhitungan.
Pertama, setiap elemen memiliki atribut offsetTop dan offsetLeft, yang mewakili jarak antara sudut kiri atas elemen dan sudut kiri atas wadah induk (objek offsetParent). Oleh karena itu, Anda hanya perlu mengakumulasikan kedua nilai tersebut untuk mendapatkan koordinat absolut elemen tersebut.
(Gambar 2 atribut offsetTop dan offsetLeft)
Dua fungsi berikut dapat digunakan untuk mendapatkan absis dan ordinat dari posisi absolut.
Copy kode kodenya sebagai berikut:
fungsi getElementLeft(elemen){
var aktualLeft = elemen.offsetLeft;
var saat ini = elemen.offsetParent;
while (saat ini !== null){
aktualLeft += saat ini.offsetLeft;
saat ini = saat ini.offsetParent;
}
kembalikan aktualLeft;
}
fungsi getElementTop(elemen){
var aktualTop = elemen.offsetTop;
var saat ini = elemen.offsetParent;
while (saat ini !== null){
aktualTop += saat ini.offsetTop;
saat ini = saat ini.offsetParent;
}
kembalikan aktualTop;
}
Karena dalam tabel dan iframe, objek offsetParent belum tentu sama dengan wadah induknya, fungsi di atas tidak berlaku untuk elemen dalam tabel dan iframe.
5. Dapatkan posisi relatif elemen halaman web
Posisi relatif elemen halaman web mengacu pada koordinat sudut kiri atas elemen relatif terhadap sudut kiri atas jendela browser.
Dengan posisi absolut, mudah untuk mendapatkan posisi relatif. Cukup kurangi jarak gulir bilah gulir halaman dari koordinat absolut. Jarak vertikal bilah gulir adalah properti scrollTop dari objek dokumen; jarak horizontal bilah gulir adalah properti scrollLeft dari objek dokumen.
(Gambar 3 atribut scrollTop dan scrollLeft)
Tulis ulang kedua fungsi di bagian sebelumnya sesuai:
Copy kode kodenya sebagai berikut:
fungsi getElementViewLeft(elemen){
var aktualLeft = elemen.offsetLeft;
var saat ini = elemen.offsetParent;
while (saat ini !== null){
aktualLeft += saat ini.offsetLeft;
saat ini = saat ini.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollLeft=dokumen.body.scrollLeft;
} kalau tidak {
var elementScrollLeft=document.documentElement.scrollLeft;
}
kembalikan elemen Kiri aktualScrollLeft;
}
fungsi getElementViewTop(elemen){
var aktualTop = elemen.offsetTop;
var saat ini = elemen.offsetParent;
while (saat ini !== null){
aktualTop += saat ini.offsetTop;
saat ini = saat ini.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollTop=dokumen.tubuh.scrollTop;
} kalau tidak {
var elementScrollTop=document.documentElement.scrollTop;
}
kembalikan elemen Top aktualScrollTop;
}
Atribut scrollTop dan scrollLeft dapat diberi nilai, dan secara otomatis akan segera menggulir halaman web ke posisi yang sesuai, sehingga dapat digunakan untuk mengubah posisi relatif elemen halaman web. Selain itu, metode element.scrollIntoView() juga memiliki efek serupa, yaitu dapat membuat elemen halaman web muncul di sudut kiri atas jendela browser.
6. Cara cepat untuk mendapatkan posisi suatu elemen
Selain fungsi di atas, ada cara cepat untuk mendapatkan posisi elemen halaman web dengan segera.
Yaitu dengan menggunakan metode getBoundingClientRect(). Ini mengembalikan objek yang berisi empat atribut: kiri, kanan, atas, dan bawah, yang masing-masing sesuai dengan jarak antara sudut kiri atas dan sudut kanan bawah elemen relatif terhadap sudut kiri atas jendela browser (area pandang) .
Oleh karena itu, posisi relatif elemen halaman web adalah
Copy kode kodenya sebagai berikut:
var X= ini.getBoundingClientRect().kiri;
var Y =ini.getBoundingClientRect().top;
Ditambah jarak scrolling, Anda bisa mendapatkan posisi absolut
Copy kode kodenya sebagai berikut:
var X= ini.getBoundingClientRect().kiri+document.documentElement.scrollLeft;
var Y =ini.getBoundingClientRect().top+document.documentElement.scrollTop;
Saat ini, IE, Firefox 3.0+, dan Opera 9.5+ semuanya mendukung metode ini, namun Firefox 2.x, Safari, Chrome, dan Konqueror tidak.