js基础知识 —— 获取元素偏移量、尺寸及浏览器尺寸

一、获取元素偏移量

• 获取元素在页面上相对参考父级的左边和上边的距离
  • 参考父级:就是假设 你要给一个元素 '绝对定位', 他是根据谁来进行定位, 那么这个元素的偏移量参考父级就是谁

1.获取元素的相对父级

• 语法：元素.offsetParent

2.获取元素距离左边的距离

• 语法：元素.offsetLeft

3.获取元素距离顶部的距离

• 语法：元素.offsetTop

代码如下，可自行复制测试

     <style>
        *{
          margin: 0;
          padding: 0;
        }
        .box1{
          width: 500px;
          height: 500px;
          background: pink;
          position: relative;
          top: 50px;
          left: 50px;
        }
        .box2{
          width: 200px;
          height: 200px;
          background: green;
          position: absolute;
          top: 100px;
          left: 200px;
        }
     </style>

      <div class="box1">
        <div class="box2"></div>
      </div>
  <script>
        var oBox2 = document.querySelector('.box2') //获取元素
        // 1.获取元素的相对父级
        console.log(oBox2.offsetParent)
        // 2.获取元素左边的偏移量（相对父级的偏移量）
        console.log(oBox2.offsetLeft)
        // 3.获取元素上面的偏移量
        console.log(oBox2.offsetTop) 
   </script>

二、获取元素尺寸

• 语法1:
  • 元素.offsetWidth
  • 元素.offsetHeight
• 语法2:
  • 元素.clientWidth
  • 元素.clientHeight

两种语法的区别：

• offsetXXX -> 实际的宽度/高度 + padding + border
• clientXXX -> 实际的宽度/高度 + padding

三、获取浏览器窗口尺寸

1. window.innerXXX ---> 计算的时候 会包含浏览器的滚动条
2. document.documentElement.clientXXX ---> 计算的时候 不会计算滚动条 (只计算浏览器的可视区域)