24 JS 中获取元素偏移量与获取元素尺寸与浏览器窗口尺寸

1. 获取元素偏移量

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

1.1 获取元素的相对父级

• 语法: 元素.offsetParent

1.2 获取元素距离左边的距离

• 语法: 元素.offsetLeft

1.3 获取元素距离顶部的距离

• 语法: 元素.offsetTop

<div class="box1">
    <div class="box2"></div>
</div>

    //0.获取元素
    var box2 = document.querySelector('.box2')

    //1. 元素.offsetParent
    console.log(box2.offsetParent)

    //2. 元素.offsetLeft
    console.log('offsetLeft:', box2.offsetLeft)

    //3. 元素.offsetTop
    console.log('offsetTop:', box2.offsetTop)

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

语法1:

   元素.offsetWidth(宽度)
   元素.offsetHeight(高度)

语法2:

   元素.clientWidth(宽度)
   元素.clientHeight(高度)

区别:

  offsetWidth/offsetHeight -> 实际的宽度/高度 + padding + border
  clientWidth/clientHeight -> 实际的宽度/高度 + padding

<style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 5000px;
      height: 6000px;
      background-color: pink;
      padding: 50px;
      border: 10px solid black;
      margin: 50px;
    }
</style>

<div></div>

    //0.获取元素
    var div = document.querySelector('div')
    
    //1.offset
    console.log('div.offsetWidth',div.offsetWidth)
    console.log('div.offsetHeight',div.offsetHeight)

    console.log('手动分割线~~~~~~~~~~~')
    //2.client
    console.log('div.clientWidth:',div.clientWidth)
    console.log('div.clientHeight:',div.clientHeight)

3. 获取浏览器窗口尺寸

3.1 window.innerWidth /window.innerHeight

• 计算的时候 会包含浏览器的滚动条

3.2document.documentElement.clientWidth/document.documentElement.clientHeight

• 计算的时候,不会计算滚动条(只计算浏览器的可视区域)

    console.log('window.innerWidth:',window.innerWidth)
    console.log('window.innerHeight:',window.innerHeight)

    console.log('手动分割线')

    console.log('Width:',document.documentElement.clientWidth)
    console.log('Height:',document.documentElement.clientHeight)