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>