分组归类js中的offset,client,scroll,page等大小

一.offset

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

1.offsetTop--offsetLeft

说明:

  • 这两个属性是获取元素左上角相对具有定位属性的最近父级元素的顶部,左边的距离
  • 如果该元素的所有父级都没有加定位属性,那么将相对body

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    #box {
      position: relative;
      width: 300px;
      height: 300px;
      background-color: red;
      overflow: hidden;
      margin: 50px;
    }
    #child {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: 30px;
      border: 10px solid yellow;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="child">
      
    </div>
  </div>
  <script>
	 var box = document.getElementById('box');
     console.log(box.offsetTop);//50,父级没有定位,相对body
     console.log(box.offsetLeft);//50,父级没有定位,相对body
      
      
     var child = document.getElementById('child');
     console.log(child.offsetTop);//30,父级有定位,相对box
     console.log(child.offsetLeft);//30,父级有定位,相对box

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

复制代码

2.offsetWidth--offsetHeight

说明:

  • 这两个属性是获取元素盒子实际的大小,不包含滚动条
  • size=content+padding*2+border*2
  • 这两个属性只能取值,不能赋值
 <script>
	 var box = document.getElementById('box');
     console.log(box.offsetWidth);//300
     console.log(box.offsetHeight);//300
      
      
     var child = document.getElementById('child');
     console.log(child.offsetTop);//140
     console.log(child.offsetLeft);//140

  </script>
复制代码

注意:

  • 实际上在没有设置box-sizing:border-box

二.client

  • clientTop
  • clientLeft
  • clientWidth
  • clientHeight

1.clientTop--clientLeft

说明:

  • clientLeft 是border-left 的宽度
  • clientTop 是border-top 的宽度
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    #box {
      width: 100px;
      height: 100px;
      margin: 50px;
      border: 45px solid red;
      padding: 10px;
      background-color: green;
    }
  </style>
</head>
<body>
    <div id="box">

    </div>
<script>
    var box = document.getElementById('box');
    console.log(box.clientLeft);//45
    console.log(box.clientTop);//45
</script>
</body>
</html>
复制代码

2.clientWidth--clientHeight

说明:

  • 盒子的大小,不包含border,滚动条
  • size=content+padding*2
    console.log(box.clientWidth);//120
    console.log(box.clientHeight);//120
复制代码

三.scroll

  • scollTop
  • scollLeft
  • scrollWidth
  • scrollHeight

1.scrollTop--scrollLeft

说明:

  • 只有在滚动时才会出现,要配合滚动事件获取大小
  • 分别表示X轴,y 轴滚动的距离
  • element.onscroll=function(){//滚动事件};
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    #box {
      width: 100px;
      height: 100px;
      margin: 50px;
      border: 30px solid red;
      padding: 10px;
      background-color: green;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div id="box">
    小明跟小华到动物园玩,进门时,小明指着小华对看门人说:“看清楚喔!等会儿出来,别说我偷了你们的猴子!” 
  </div>
  <script>
    var box = document.getElementById('box');
    // 当拖动box中的滚动条的时候触发
    box.onscroll = function () {
      console.log(box.scrollLeft);
      console.log(box.scrollTop);
    }
  </script>
</body>
</html>

复制代码

2.scrollWidth--scrollHeight

说明:

  • 内容的大小,包括padding 和未显示的内容(需要滚动的部分),不包含滚动条
  • scrollWidth=content+padding*2-17(滚动条宽度)
   console.log(box.scrollWidth);//103
   console.log(box.scrollHeight);//269,比较难测
复制代码

四.page

  • pageX
  • pageY

1.pageX--pageY

说明:

  • 这两个属性是事件对象里面的属性,因此需要通过事件对象来获取
  • 鼠标触发事件的区域是在选中的元素内
  • 但是获取到的值是相对整个页面来说的
    bar.onclick=function(e){//鼠标点击事件,其他事件也可以
    e=e||window.event;
    //获取鼠标
    var x=e.pageX
    var y=e.pageY
    }
复制代码