Difference between offset series, client series and scroll series

offset: Use the relevant attributes of the offset series to dynamically obtain the position (offset), size, etc. of the element.

client: Use the relevant attributes of the client series to dynamically obtain the border size and element size of the element.

scroll: Use the relevant attributes of the scroll series to dynamically obtain the size and scrolling distance of the element.

Offset series related attributes

offset series attribute	effect
element.offsetParent	Returns the element with a positioned parent or body if no parent is positioned
element.offsetTop	Returns the offset of the element relative to the top border of the positioned element
element.offsetLeft	Returns the offset of the element relative to the left border of the positioned element with the parent
element.offsetWidth	Returns the width of itself including padding, border, and content area, and the returned value does not have a unit
element.offsetHeight	Returns the height of itself including padding, border, and content area, and the returned value does not have a unit

The relevant code is as follows:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            position: relative;
            margin: 100px auto;
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 15px solid #333;
            background-color: rgb(255, 98, 0);
        }

        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            /* transform: translate(-50%, -50%); */
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 15px solid #333;
            background-color: rgb(145, 255, 0);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father')
        var son = document.querySelector('.son')
        console.log(son.offsetParent);
        console.log(son.offsetTop);
        console.log(son.offsetLeft);
        console.log(father.offsetWidth);
        console.log(father.offsetHeight);
    </script>
</body>

</html>

Note: offsetParent generally returns the parent box with positioning, and here son.offsetParent returns the parent box of father.

The description of offsetWidth/offsetHeight, offsetTop/offsetLeft is as follows:

Client series related attributes

client series attributes	effect
element.clientTop	Returns the size of the border on the element
element.clientLeft	Returns the size of the element's left border
element.clientWidth	Returns the width of itself including padding and content area, excluding borders, and returns values without units
element.clientHeight	Returns the height of itself including padding and content area, without border, and the returned value without unit

The relevant code is as follows:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .self {
            margin: 100px auto;
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 20px solid #333;
            background-color: rgb(255, 98, 0);
        }
    </style>
</head>

<body>
    <div class="self">
    </div>
    <script>
        var self = document.querySelector('.self')
        console.log(self.clientTop);
        console.log(self.clientLeft);
        console.log(self.clientWidth);
        console.log(self.clientHeight);
    </script>
</body>

</html>

The description is as shown in the figure:

Scroll series related properties

Scroll series properties	illustrate
element.scrollTop	Returns the upper side distance that is swept away, and the returned value does not have a unit
element.scrollLeft	Returns the left distance to be swept away, the returned value has no unit
element.scrollWidth	返回自身包括padding实际宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身包括padding实际高度，不含边框，返回数值不带单位

相关代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .self {
            margin: 100px auto;
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 20px solid #333;
            background-color: rgb(255, 98, 0);
            /* overflow: scroll; */
        }
    </style>
</head>

<body>
    <div class="self">
        我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
        我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
        我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
        我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
        我是内容 我是内容
    </div>
    <script>
        var self = document.querySelector('.self')
        console.log(self.scrollWidth);
        console.log(self.scrollHeight);
        self.addEventListener('scroll', function () {
            console.log(self.scrollTop);
        })
    </script>
</body>

</html>

说明如图：

注意：element.scrollTop是元素被卷去的头部，如果要用到页面被卷去的头部则是window.pageYOffset。

offset、client和scroll的主要用法：

（1） offset系列常用于获得元素位置offsetLeft offsetTop.

（2） client常用于获取元素大小clientWidth clientHeight.

（3） scroll常用于获取滚动距离 scrollTop scrollLeft.

（4）注意页面的滚动距离通过window.pageYOffset 获得

Difference between offset series, client series and scroll series

Guess you like