例
得到的的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>
试一试»