浅谈js中的offset

最新推荐文章于 2023-09-16 10:00:16 发布

小夢書亭

最新推荐文章于 2023-09-16 10:00:16 发布

阅读量6.9k

点赞数 6

分类专栏： js 文章标签： offset

本文链接：https://blog.csdn.net/qq_41307042/article/details/102857740

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先看一张图，比较清晰的可以看到offset的使用：

offsetHeight: 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

注意一点：

以上图片是针对offsetParent的情况，也就是说父元素要position:relative

请看一下代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>offset</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .box {
  	position:relative;
    margin: 40px;
    overflow: hidden;
  }
  .mydiv {
    width: 100px;
    height: 120px;
    padding: 20px;
    border: 2px solid #ccc;
    margin: 20px 30px;
  }
</style>
 
<body>
  <div class="box">
    <div class="mydiv" id="myDiv"></div>
  </div>
  <script>
    var mydiv = document.getElementById('myDiv');
    // offsetHeight 元素垂直方向占用的空间大小 包括元素的高度+水平滚动轴高度+边框高度
    console.log(mydiv.offsetHeight); // 输出164   计算为 120+20+20+2+2 = 164
    // offsetWidth 元素在水平方向上占用的空间大小，以像素计。
    // 包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
    console.log(mydiv.offsetWidth); // 输出 144  计算为 100+20+20+2+2 = 144
    // offsetTop
    console.log(mydiv.offsetTop); // 输出 20
    // offsetLeft
    console.log(mydiv.offsetLeft); // 输出 30
  </script>
</body>
 
</html>

如果父元素没有写position，在看结果：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>offset</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .box {

    margin: 40px;
    overflow: hidden;
  }
  .mydiv {
    width: 100px;
    height: 120px;
    padding: 20px;
    border: 2px solid #ccc;
    margin: 20px 30px;
  }
</style>
 
<body>
  <div class="box">
    <div class="mydiv" id="myDiv"></div>
  </div>
  <script>
    var mydiv = document.getElementById('myDiv');
    // offsetHeight 元素垂直方向占用的空间大小 包括元素的高度+水平滚动轴高度+边框高度
    console.log(mydiv.offsetHeight); // 输出164   计算为 120+20+20+2+2 = 164
    // offsetWidth 元素在水平方向上占用的空间大小，以像素计。
    // 包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
    console.log(mydiv.offsetWidth); // 输出 144  计算为 100+20+20+2+2 = 144
    // offsetTop
    console.log(mydiv.offsetTop); // 输出 60 
    // offsetLeft
    console.log(mydiv.offsetLeft); // 输出 70
  </script>
</body>
 
</html>

这时就是body到该元素的距离。

这点做此记录，让自己不要忘记。

借鉴了一些：https://blog.csdn.net/weixin_37861326/article/details/81453593

小夢書亭

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
浅谈js中的offset

先看一张图，比较清晰的可以看到offset的使用：offsetHeight: 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。offsetLeft：元素的左外边框至包含元素的左内边框之间的像...
复制链接

扫一扫