HTML DOM Element offsetTop အကိုးအချုပ်
- အဆင်းပြင် ပြန် offsetParent
- နောက်ပိုင်း စာရင်း outerHTML
- အဆင်းပြင် ပြန် HTML DOM Elements အကို
ဒါ နှင့် အသုံးပြုခြင်း
offsetTop အကိုးအချုပ် အကွက် ပြန်လည်သတ်မှတ် ပါသည် (ပုံစံဗီး အရ)။ အကိုးအချုပ် အကွက် သည် သာမန် ဖြစ်သည်。
ပြန်လည်သတ်မှတ် ပါသည်:
- အကွက် အပေါ် အရောင်တံတား နှင့် အပေါ် အကွက်
- အဖွဲ့ အပေါ် အရောင်တံတား နှင့် လျားတန်း
ကြည့်ရှုချက်CSS အကွက် ဖော်ပြချက်
offsetParent
အားလုံး အစိတ်အပိုင်း အပေါ် ချို့နိုင်သူ ကို အခြေခံ အဖွဲ့ နှင့် မျှော်လင့်သည်:
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
ချို့နိုင်သူ အဖွဲ့ သည် ဝိုင်းပြုသော အခြေခံ အပေါ် ရှိ သော အပြင်းအထန် မရှိသော အဖွဲ့ ကို ဆိုလိုသည်。
ချို့နိုင်သော ပြောင်းလဲသူ မရှိဘဲဖြစ်ခဲ့ရင် ချို့နိုင်သူ ကို အခြေခံ ရှိသော စာတမ်း အခြေခံ ကို နှင့် မျှော်လင့်သည်。
အခြေခံ ကြည့်ရှုချက်
实例
例子 1
获取 "myDIV" 的 offsetTop 位置：
const element = document.getElementById("myDIV");
let pos = element.offsetTop;
例子 2
获取 "myDIV" 的位置：
const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;
例子 3
创建粘性导航栏：
// 获取导航栏
const navbar = document.getElementById("navbar");
// 获取导航栏的偏移位置
const sticky = navbar.offsetTop;
// 当您到达其滚动位置时，将 sticky 类添加到导航栏。离开滚动位置时删除 sticky 类。
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
}
navbar.classList.remove("sticky");
}
}
အဓိပ္ပာယ်
top အဆင်းပြင် အခွင့်အရေး ပြန်ကုန်ခြင်း：
element.offsetTop
အပြန်အလမ်း
| အမျိုးအစား | ဖော်ပြ |
|---|---|
| နှစ် | အကွက် အဆင်းပြင် စက်တင် အချက်အလက် ပြီး ပုံစံ ပေါ်မူးယား ပါ။ |
ဘာသာ အကူအညီ
အားလုံး ဘရောက်သုံး ဘာသာ element.offsetTop：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| ထောက်ပံ့ | ထောက်ပံ့ | ထောက်ပံ့ | ထောက်ပံ့ | ထောက်ပံ့ | ထောက်ပံ့ |
- အဆင်းပြင် ပြန် offsetParent
- နောက်ပိုင်း စာရင်း outerHTML
- အဆင်းပြင် ပြန် HTML DOM Elements အကို
