JS 中 offsetWidth、offsetHeight、offsetLeft、offsetTop 详解

最新推荐文章于 2023-01-06 20:21:24 发布

zhangpaopao0609

最新推荐文章于 2023-01-06 20:21:24 发布

阅读量1.2k

点赞数

分类专栏： JS 文章标签： JS offsetLeft offsetTop offsetHeight offsetWidth

本文链接：https://blog.csdn.net/qq_41800366/article/details/84861877

版权

JS 专栏收录该内容

42 篇文章 3 订阅

订阅专栏

1. 总述

在JS 中 offsetWidth、offsetHeight、offsetLeft、offsetTop 属性在做一些复杂的交互效果中是非常常用的，因此在本博文中详细的介绍并给出实例。
以上的4个属性是成对出现的，因此下面介绍中也成对的介绍，在实例中为了减少代码量，我直接用的id，实际开发中不推荐。

2. offsetWidth和offsetHeight

2.1 概念

offsetWidth ：直接返回元素本身的宽度，
offsetHeight ：直接返回元素本身的高度。
这两个属性的值只与该元素有关，与周围的元素（父级与子级元素无关）

2.2 实例

在这里给出一个实例，给出代码，为正在学习的同学提供参考。

<!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>test</title>
    <style>
        #test{
            width: 200px;
            height: 180px;
            background: skyblue;
        }
    </style>
</head>
<body>
    <div id="test">
        this is test
    </div>
    <script>
        var test_offsetWidth = test.offsetWidth;
        var test_offsetHeight = test.offsetHeight;
        console.log(test_offsetWidth,test_offsetHeight)
    </script>
</body>
</html>

打印结果为： 200 180
在这里插入图片描述

3. offsetLeft和offsetTop

3.1 概念

这两个属性与offsetParent有关，解释为返回该元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量和垂直偏移量。
那么先介绍一下offsetParent : offsetParent 会返回元素的偏移容器。通俗理解就是当前元素相对偏移的父元素，可看接下来的实例。

3.1.1 首先不在父元素中添加position属性。

那么此时如果children元素要做偏移的话，相对的是body，那么它的offsetParent自然就是body，看结果如下：

<!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>test</title>
    <style>
        #parent{
            width: 200px;
            height: 180px;
            background: skyblue;
        }
        #children{
            width: 100px;
            height: 90px;
            background: skyblue;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="children"></div>
    </div>
    <script>
        console.log(children.offsetParent)
    </script>
</body>
</html>

打印结果为：body 元素
在这里插入图片描述

3.1.2 在父元素parent中添加position属性。

那么此时如果children元素要做偏移的话，相对的是parent，那么它的offsetParent自然就是parent，看结果如下：

<!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>test</title>
    <style>
        #parent{
            width: 200px;
            height: 180px;
            background: skyblue;
            position: relative;
        }
        #children{
            width: 100px;
            height: 90px;
            background: skyblue;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="children"></div>
    </div>
    <script>
        console.log(children.offsetParent)
    </script>
</body>
</html>

打印结果为：parent 元素
在这里插入图片描述
现在理解了什么是offsetParent,再来看offsetLeft和offsetTop的概念。

offsetLeft：返回元素的水平偏移位置（相对于它的offsetParent）,
offsetTop：返回元素的垂直偏移位置 (相对于它的offsetParent)。

现在应该会清楚很多吧！

3.2 实例

在这里给出一个实例，给出代码，为正在学习的同学提供参考。
实例中，offsetParent 是parent，相信看了上一节的同学一眼就看出了，因为我在parent中添加了 position: relative；同时为children元素添加了position 属性，还做了偏移，那么此时的offsetLeft，offsetTop为多少呢，可以先看看代码，再看结果。

<!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>test</title>
    <style>
        #parent{
            width: 200px;
            height: 180px;
            background: skyblue;
            position: relative;
        }
        #children{
            width: 100px;
            height: 90px;
            background: red;
            position:absolute;
            top: 20px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="children"></div>
    </div>
    <script>
        console.log(children.offsetLeft, children.offsetTop)
    </script>
</body>
</html>