css布局：offsetTop用法详解-js怎么获取元素顶部的偏移量

admins 发布于 2023-08-22 15:33:48

分类：IT教程

阅读( )

评论( )

css布局：offsetTop用法详解-js怎么获取元素顶部的偏移量

在 CSS 中，offsetTop 是一个只读的属性，它返回元素顶部与其包含块（containing block）顶部的偏移量。包含块是由最近的块级祖先元素（block-level ancestor element）定义的矩形区域。

offsetTop 的用法通常与 offsetParent 属性一起使用。offsetParent 属性返回当前元素的父级元素，该父级元素是第一个将当前元素包含在其包含块中的元素。

以下是一个demo，展示了如何使用 offsetTop 和 offsetParent 属性：

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div {  
  border: 1px solid black;  
}  
</style>  
</head>  
<body>  
  
<div style="height: 100px; padding: 10px;">  
  <span style="height: 20px; padding: 5px;">  
    <span style="height: 10px; padding: 2px;">  
      <span id="mySpan" style="height: 5px;"></span>  
    </span>  
  </span>  
</div>  
  
<script>  
var mySpan = document.getElementById("mySpan");  
var parent = mySpan.offsetParent;  
console.log("offsetTop of mySpan: " + mySpan.offsetTop);  
console.log("offsetTop of parent: " + parent.offsetTop);  
console.log("Difference: " + (mySpan.offsetTop - parent.offsetTop));  
</script>  
  
</body>  
</html>

上面的html段中，有一个包含多个 <span> 元素的 <div>。其中，最后一个 <span> 元素具有一个 ID mySpan。在 JavaScript 部分，我们获取了 mySpan 元素的 offsetParent，它返回的是最近的包含块。然后，我们分别输出了 mySpan 和其父元素的 offsetTop 值，并计算它们之间的差值。

这个示例的输出可能会因浏览器和元素的具体样式而有所不同，但通常来说，offsetTop 的值是相对于其父元素的顶部边缘的像素数。

未经允许不得转载：免责声明：本文由用户上传，如有侵权请联系删除！