JavaScript 之 offset 、client、scroll

下面这三组是关于元素大小、位置相关的属性

一、offset 偏移量

　　1、offsetParent

　　　　该属性获取距离当前元素最近的定位父元素，如果没有定位父元素此时是 body 元素

　　2、offsetLeft / offsetTop

　　　　该属性获取当前元素距离 offsetParent 的横向偏移和纵向偏移

　　3、offsetWidth / offsetHeight

　　　　该属性获取当前元素的宽高，宽高包括：内容（content）、边框（border）和内填充（padding）

　　

　　注意：offset 属性 是只读属性

　 Demo：

// 结构
<div id="box">
    <div id="child">
      
    </div>
</div>
// 样式
  <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: 50px;
      border: 10px solid yellow;
      padding: 10px;
    }
  </style>
// js
<script>
   // 获取子元素的位置和大小
    var child = document.getElementById('child');
    console.log(child.offsetParent);
    // 获取child的位置     offsetLeft 距离offsetParent的横向偏移
    console.log(child.offsetLeft);
    console.log(child.offsetTop);

    // 获取child的大小   包括边框和padding
    console.log(child.offsetWidth);
    console.log(child.offsetHeight);
</script>

二、client 客户区大小

　　1、clientLeft / clientTop

　　　　该属性是获取当前元素的 border-left、border-right 的宽度。（没有 border-right/border-bottom属性）

　　2、clientWidth / clientHeight

　　　　该属性是获取当前元素的宽高，宽高包括：内容（content）和 内填充 （padding）

　　

 　　Demo：

// 结构
 <div id="box"> </div>
// 样式
 <style>
    body {
      margin: 0;
    }

    #box {
      width: 100px;
      height: 100px;
      margin: 50px;
      border: 30px solid red;
      padding: 10px;
      background-color: green;
    }
  </style>
// js
<script>
    var box = document.getElementById('box');
     // clientLeft  是border-left 的宽度
    // clientTop    border-top 的宽度
    console.log(box.clientLeft);
    console.log(box.clientTop);

    // 获取大小   包括padding  但是不包括边框
    console.log(box.clientWidth);
    console.log(box.clientHeight);
</script>

三、scroll 滚动偏移

　　 1、scrollLeft / scrollTop

　　　　该属性获取元素内容滚动出去的横向距离 / 纵向距离

　　2、scrollWidth / scrollHeight

　　　　该属性获取元素的大小，指的是：内容（content）+ 内填充（padding）和未显示出来的内容

　　

 　　Demo：

// 结构
<div id="box">
    Javascript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言。它已经由欧洲电脑制造商协会通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、FireFox等）支持。
  </div>
// 样式
<style>
    body {
      margin: 0;
    }

    #box {
      width: 100px;
      height: 100px;
      margin: 50px;
      border: 30px solid red;
      padding: 10px;
      background-color: green;
      overflow: auto;
    }
  </style>
// js
 <script>
    // scroll
    var box = document.getElementById('box');
    // 当拖动box中的滚动条的时候触发
    box.onscroll = function () {
      console.log(box.scrollLeft);
      console.log(box.scrollTop);
    
    }
    // 内容的大小，包括padding 和未显示的内容，不包括滚动条
     console.log(box.scrollWidth);
     console.log(box.scrollHeight);

  </script>