你所需要计算的(元素偏移量/尺寸/窗口尺寸)方法大全

一.获取元素偏移量

• 定义:获取元素在页面上相对参考父级的左边和上边的距离

  
      <div class="box1">
          <div class="box2"></div>
      </div>
  
      var box2 = document.querySelector('.box2')      // 获取元素
  

  • 1.获取元素的相对父级(了解)
    • 语法:元素.offsetParent

      console.log(box2.offsetParent)
  

  • 2.获取元素距离左边的距离
    • 语法:元素.offsetLeft

      console.log('相对参考父级的左边的距离',box2.offsetLeft)
  

  • 3 获取元素距离顶部的距离
    • 语法:元素.offsetTop

      console.log('相对参考父级的上边的距离',box2.offsetTop)  
  

二.获取元素尺寸(元素的占地面积)

• 语法1:
  • 元素.offsetWidth
  • 元素.offsetHeight

      console.log('offset获取div的宽度',oDiv.offsetWidth);
      console.log('offset获取div的高度',oDiv.offsetHeight);
  

• 语法2:
  • 元素.clientWidth
  • 元素.clientHeight

      console.log('client获取div的宽度',oDiv.clientWidth);
      console.log('client获取div的高度',oDiv.clientHeight);
  

• 区别:
  • offset... -> 计算实际的宽度和高度 + padding + border (计算包含边框的尺寸)
  • client... -> 计算实际的宽度和高度 + padding (计算包不含边框的尺寸)
  • margin不会影响计算尺寸的大小

三.获取浏览器窗口尺寸

• 语法1(包含浏览器的滚动条)

    console.log('inner获取浏览器的宽度',window.innerWidth)
    console.log('inner获取浏览器的高度',window.innerHeight)

• 语法2(计算浏览器的可视区域(不会计算滚动条)

    console.log('client获取浏览器的宽度',document.documentElement.clientWidth)
    console.log('client获取浏览器的高度',document.documentElement.clientHeight)