理解JavaScript中的DOM元素定位-CSDN博客

本文链接：https://blog.csdn.net/weixin_46421045/article/details/106677477

本文探讨了如何在JavaScript中获取和操作DOM元素的位置。通过DOM API，可以获取到元素的offsetTop, offsetLeft, scrollTop, scrollLeft等属性，实现元素在页面上的精确定位。此外，还介绍了CSS样式如何影响元素的位置，以及在动态更新页面时，如何实时调整元素的位置。" 46624515,1265731,解决Python版本不匹配导致的yum无法运行问题,"['Python', 'Linux', 'yum', '系统管理']

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 5px solid #333;
      margin: 10px;
      height: 200px;
      background: red;
      overflow: auto;
    }
    .container {
      position: relative;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <p>box</p>
      <p>box</p>
      <p>box</p>
      <p>box</p>
      <p>box</p>
      <p>box</p>
      <p>box</p>
      <p>box</p>
      <p>box</p>
    </div>
  </div>
  
  <script>
    var box = document.querySelector('.box')

    // 获取的是元素加边框前后的偏移量，也就是左边框的宽度
    // clientTop 就是上边框的宽度
    console.log(box.clientLeft)

    // offsetParent指的是最近的有定位属性的祖先级，如果都没有定位，得到body
    // offsetLeft获取的就是相对于offsetParent的坐标
    // 如果box有绝对定位的话，那么offsetLeft就和定位坐标left的值一样
    console.log(box.offsetLeft)

    // console.log(box.scrollTop) // 在这里直接获取永远都是0

    // 当滚轮开始滚动的时候来获取
    box.onscroll = function () {
      console.log(box.scrollTop)
    }

    // 让滚轮默认在元素底部，可以给scrollTop赋值
    // 滚动内容总高度 - 盒子本身高度可以让滚动条在最底部
    box.scrollTop = box.scrollHeight - box.clientHeight // 让滚动条在最底部的公式

  </script>
</body>
</html>

JS中DOM元素的位置