JS中的offset、scroll、client

javascript
  目录
  1. 1. JS中的offset、scroll、client
    1. 1.1. 1. offset
    2. 1.2. 2. scroll
    3. 1.3. 3. client
    4. 1.4. 最后，奉上一个demo

JS中的offset、scroll、client简单整理

JS中的offset、scroll、client

在下开发中经常碰到 offset、scroll、client 这几个关键字，比如 offsetLeft、offsetHeight、scrollHeight、clientTop 什么的，每次都要各种实验，这里总结一下，一劳永逸。
来两张图先：
img
img

1. offset

offset 指偏移，包括这个元素在文档中占用的所有显示宽度，包括滚动条、 padding、 border，不包括 overflow隐藏的部分。

  • offsetParent属性返回一个对象的引用，这个对象是距离调用 offsetParent的父级元素中最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位, 则 offsetParent属性的取值为根元素的引用。如果当前元素的父级元素中没有进行CSS定位（position为 absolute/relative）， offsetParent 为 body如果当前元素的父级元素中有CSS定位（ position 为 absolute/relative）， offsetParent 取父级中最近的元素
  • obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位：像素。
    offsetWidth = border-width*2+ padding-left+ width+ padding-right
  • obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型，单位：像素。
    offsetHeight = border-width*2+ padding-top+ height+ padding-bottom
  • obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位：像素。
    offsetTop= offsetParent的padding-top + 中间元素的offsetHeight + 当前元素的margin-top
  • obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位：像素。
    offsetLeft= offsetParent的padding-left + 中间元素的offsetWidth + 当前元素的margin-left

2. scroll

scroll指滚动，包括这个元素没显示出来的实际宽度，包括 padding，不包括滚动条、 border

  • scrollHeight 获取对象的滚动高度，对象的实际高度；
  • scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
  • scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
  • scrollWidth 获取对象的滚动宽度

3. client

client指元素本身的可视内容，不包括 overflow被折叠起来的部分，不包括滚动条、 border，包括 padding

  • clientWidth 对象可见的宽度，不包括滚动条等边线，会随窗口的显示大小改变
  • clientHeight 对象可见的高度
  • clientTop、clientLeft 这两个返回的是元素周围边框的厚度，一般它的值就是0。因为滚动条不会出现在顶部或者左侧

最后，奉上一个demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  #parent {
    position: relative;
    margin: 20px auto;
    width: 300px;
    height: 400px;
    border: 1px solid blue;
    overflow: auto;
  }
  #child {
    width: 500px;
    height: 600px;
    margin: 10px;
    padding: 5px;
    background-color: blanchedalmond;
    box-sizing: border-box;
  }
</style>
<body>
  <div id="parent">
    <div id="child"></div>
  </div>
</body>
<script>
  var nParent = document.querySelector('#parent'),
      nChild = document.querySelector('#child');
  document.addEventListener('click', function() {
    // offset偏移
    console.log('父元素->', nChild.offsetParent);
    console.log('offsetWidth->', nChild.offsetWidth);
    console.log('offsetHeight->', nChild.offsetHeight);
    console.log('offsetTop->', nChild.offsetTop);
    console.log('offsetLeft->', nChild.offsetLeft);
    console.log('<------------------------->');
    // scroll滚动
    console.log('scrollHeight->', nParent.scrollHeight);
    console.log('scrollLeft->', nParent.scrollLeft);
    console.log('scrollTop->', nParent.scrollTop);
    console.log('scrollWidth->', nParent.scrollWidth);
    console.log('<------------------------->');
    // client
    console.log('clientWidth->', nChild.clientWidth);
    console.log('clientHeight->', nChild.clientHeight);
    console.log('clientTop->', nChild.clientTop);
    console.log('clientLeft->', nChild.clientLeft);
  }, false);
</script>
</html>
  基础知识