js中offset、client、scroll的区别

最新推荐文章于 2022-10-16 22:27:17 发布

暴走千寻

最新推荐文章于 2022-10-16 22:27:17 发布

阅读量201

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/baozouqianxun/article/details/109186705

版权

js中offset、client、scroll的区别

1.offset：偏移量
offsetLeft：元素的左外边框至最近的被定位的父元素之间的像素距离。
offsetTop：元素的上外边框至最近的被定位的父元素之间的像素距离。
offsetWidth: 元素的宽，包含填充，边框，滚动条的宽度。
offsetHeight: 元素的高，包含填充，边框，滚动条的高度。

example:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 300px;
            height: 300px;
            background-color: #ccc;
            margin: 50px;
            overflow: hidden;
            position: relative;
        }

        #son {
            width: 50px;
            height: 50px;
            background-color: #ff3040;
            border: 5px solid #666;
            padding: 10px;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="son"></div>
    </div>
    <script>
        var box = document.getElementById('box')
        var son = document.getElementById('son')
        //父盒子偏移量
        console.log(box.offsetTop);//50
        console.log(box.offsetLeft);//50
        console.log(box.offsetHeight);//300
        console.log(box.offsetWidth);//300
        //子盒子偏移量
        console.log(son.offsetTop);//50
        console.log(son.offsetLeft);//50
        console.log(son.offsetHeight);//80
        console.log(son.offsetWidth);//80
    </script>
</body>

</html>

2.client
clientLeft：元素左侧边框宽度。
clientTop：元素顶部边框宽度。
clientWidth， clientHeight：内容区域的宽高，padding＋content的宽高，不包括边框宽度值。

example:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: yellow;
            border: 20px solid #ccc;
            padding: 10px;
            margin: 100px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById('box')
        console.log(box.clientTop);//20
        console.log(box.clientLeft);//20
        console.log(box.clientWidth);//220
        console.log(box.clientHeight);//220
    </script>
</body>

</html>

3.scorll ：滚动大小

scrollLeft：被隐藏在内容区域左侧的像素数。
scrollTop：被隐藏在内容区域上方的像素数。
scrollWidth，scorllHeight : 元素整个内容的宽高，包括隐藏掉的内容。

example:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            padding: 10px;
            color: #fff;
            margin: 100px;
            border: 10px solid #666;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div id="box">为你付出那种伤心你永远不了解，我又何苦勉强自己爱上你的一切,你又狠狠逼退我的防备</div>
    <script>
        var box = document.getElementById('box')
        console.log(box.scrollLeft);//0
        console.log(box.scrollTop);//0
        console.log(box.scrollWidth);//103
        console.log(box.scrollHeight);//188
    </script>
</body>

</html>