区别offset系列、client系列和scroll系列

offset：使用offset系列的相关属性就可以动态的得到该元素的位置（偏移）、大小等。

client：使用client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

scroll：使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。

offset系列相关属性

offset系列属性	作用
element.offsetParent	返回该元素带有父定位元素如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有父定位元素上边框的偏移
element.offsetLeft	返回元素相对带有父定位元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括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>
        .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>

说明：offsetParent一般返回带有定位的父盒子，这里son.offsetParent返回的是father父盒子。

而offsetWidth/offsetHeight、offsetTop/offsetLeft说明如下图：

client系列相关属性

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括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);
        }
    </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>

说明如图：

scroll系列相关属性

scroll系列属性	说明
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
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 获得

区别offset系列、client系列和scroll系列

猜你喜欢