最新的Web開發教程
 

Element offsetTop Property

<元素對象

得到的的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

句法

返回頂部偏移位置:

object .offsetTop

技術細節

默認值: 沒有默認值
返回值: 一個數字,表示該元件的頂部位置,以像素為單位
DOM版本: CSSOM

更多示例

獲得AA的位置<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>
試一試»


<元素對象