ตัวอย่าง
ได้รับตำแหน่ง offsetTop ของ <div> องค์ประกอบ:
<div id="test">
<p>Click the button to get offsetTop for the test
div.</p>
<p><button onclick="myFunction()">Try it</button></p>
<p>offsetTop
is: <span id="demo"></span></p>
</div>
<script>
function
myFunction() {
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
}
</script> ลองตัวเอง» ความหมายและการใช้งาน
สถานที่ให้บริการ offsetTop ส่งกลับตำแหน่งบนสุด (in pixels) เทียบกับด้านบนขององค์ประกอบ offsetParent
ค่ากลับมารวมถึง:
- ตำแหน่งสูงสุดและอัตรากำไรขั้นต้นขององค์ประกอบ
- ช่องว่างภายในบนแถบเลื่อนและชายแดนขององค์ประกอบ offsetParent
หมายเหตุ: offsetParent องค์ประกอบเป็นบรรพบุรุษที่ใกล้ที่สุดที่มีตำแหน่งอื่นที่ไม่ใช่คงที่
เคล็ดลับ: หากต้องการกลับไปตำแหน่งด้านซ้ายขององค์ประกอบใช้ offsetLeft คุณสมบัติ
สนับสนุนเบราว์เซอร์
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| offsetTop | ใช่ | 8.0 | ใช่ | ใช่ | ใช่ |
วากยสัมพันธ์
กลับไปตำแหน่งบนสุดชดเชย:
object .offsetTop
รายละเอียดทางเทคนิค
| ราคาเริ่มต้น: | ไม่มีค่าเริ่มต้น |
|---|---|
| กลับค่า: | จำนวนคิดเป็นตำแหน่งสูงสุดขององค์ประกอบพิกเซล |
| DOM เวอร์ชัน: | CSSOM |
ตัวอย่างอื่น ๆ
ตัวอย่าง
ได้รับตำแหน่งของเอเอ <div> องค์ประกอบ:
<div id="test">
<p>Click the button to get the left and top offsets for
the test div.</p>
<p><button onclick="myFunction()">Try it</button></p>
<p id="demo">offsetLeft: <br>offsetTop: </p>
</div>
<script>
function myFunction() {
var testDiv =
document.getElementById("test");
var demoDiv =
document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft:
" + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
}
</script>
ลองตัวเอง»