JavaScript 之 offset 、client、scroll

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

一、offset 偏移量

　　1、offsetParent

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

　　2、offsetLeft / offsetTop

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

　　3、offsetWidth / offsetHeight

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

　　注意：offset 属性是只读属性

　 Demo：

 1 // 结构
 2 <div id="box">
 3     <div id="child">
 4       
 5     </div>
 6 </div>
 7 // 样式
 8   <style>
 9     body {
10       margin: 0;
11     }
12     #box {
13       position: relative;
14        300px;
15       height: 300px;
16       background-color: red;
17       overflow: hidden;
18       margin: 50px;
19     }
20     #child {
21        100px;
22       height: 100px;
23       background-color: blue;
24       margin: 50px;
25       border: 10px solid yellow;
26       padding: 10px;
27     }
28   </style>
29 // js
30 <script>
31    // 获取子元素的位置和大小
32     var child = document.getElementById('child');
33     console.log(child.offsetParent);
34     // 获取child的位置     offsetLeft 距离offsetParent的横向偏移
35     console.log(child.offsetLeft);
36     console.log(child.offsetTop);
37 
38     // 获取child的大小   包括边框和padding
39     console.log(child.offsetWidth);
40     console.log(child.offsetHeight);
41 </script>

View Code

二、client 客户区大小

　　1、clientLeft / clientTop

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

　　2、clientWidth / clientHeight

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

　　Demo：

 1 // 结构
 2  <div id="box"> </div>
 3 // 样式
 4  <style>
 5     body {
 6       margin: 0;
 7     }
 8 
 9     #box {
10        100px;
11       height: 100px;
12       margin: 50px;
13       border: 30px solid red;
14       padding: 10px;
15       background-color: green;
16     }
17   </style>
18 // js
19 <script>
20     var box = document.getElementById('box');
21      // clientLeft  是border-left 的宽度
22     // clientTop    border-top 的宽度
23     console.log(box.clientLeft);
24     console.log(box.clientTop);
25 
26     // 获取大小   包括padding  但是不包括边框
27     console.log(box.clientWidth);
28     console.log(box.clientHeight);
29 </script>

View Code

三、scroll 滚动偏移

　　 1、scrollLeft / scrollTop

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

　　2、scrollWidth / scrollHeight

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

　　Demo：

 1 // 结构
 2 <div id="box">
 3     Javascript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言。它已经由欧洲电脑制造商协会通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、FireFox等）支持。
 4   </div>
 5 // 样式
 6 <style>
 7     body {
 8       margin: 0;
 9     }
10 
11     #box {
12        100px;
13       height: 100px;
14       margin: 50px;
15       border: 30px solid red;
16       padding: 10px;
17       background-color: green;
18       overflow: auto;
19     }
20   </style>
21 // js
22  <script>
23     // scroll
24     var box = document.getElementById('box');
25     // 当拖动box中的滚动条的时候触发
26     box.onscroll = function () {
27       console.log(box.scrollLeft);
28       console.log(box.scrollTop);
29     
30     }
31     // 内容的大小，包括padding 和未显示的内容，不包括滚动条
32      console.log(box.scrollWidth);
33      console.log(box.scrollHeight);
34 
35   </script>

View Code